Test Like It's 2017

Testing UIs has always been a hard job. In the components era, there are new tools and solutions available that transform completely the way we approach testing. From snapshots, through end-to-end frameworks, to style guide testing. In this talk, we'll see some modern (and creative) testing solutions.

Cover by pixelandgretel.it

Transcript

1. TEST LIKE IT’S 2017 @MicheleBertoli
2. Mee-keh-leh Front End Engineer at Facebook Author of React Design Patterns and Best Practices Follow me @MicheleBertoli
3. Testing
4. Devs who think tests are useful Devs who test their code Devs who think they have enough tests
5. Dmitrii Abramov, Feb 2017 “Saddest thing I hear from engineers: we aren't writing tests right now because we're focusing on building features.”
6. Testing is hard
7. Time consuming
8. Complex to setup
9. False negatives
10. #TestingFatigue
11. Testing is important
12. Catching bugs
13. Confidence
14. Documentation
15. Testing is evolving
16. Dan Abramov, Jul 2016 “Unpopular opinion: component unit testing is overrated.”
17. Guillermo Rauch, Dec 2016 “Write tests. Not too many. Mostly integration.”
18. Mike Cohn, 2009
19. Dmitrii Abramov, 2016
20. jest
21. Zero configuration Fast and sandboxed Instant feedback
22. Built-in code coverage reports Powerful mocking library Works with TypeScript
23. Snapshot testing
24. Capture snapshots of React trees or other serializable values to simplify UI testing and to analyze how state changes over time.
25. const Button = ({ disabled, primary, text }) => ( <button className={primary ? 'btn--primary' : 'btn--secondary'} disabled={disabled} > {text} </button> )
26. test('enzyme', () => { const wrapper = shallow( <Button disabled primary text="Click me!" />, ) expect(wrapper.prop('disabled')).toBe(true) expect(wrapper.hasClass('btn--primary')).toBe(true) expect(wrapper.text()).toBe('Click me!') })
27. test('test-renderer', () => { const tree = renderer.create( <Button disabled primary text="Click me!" />, ).toJSON() expect(tree).toMatchSnapshot() })
28. exports[`test-renderer 1`] = ` <button className="btn--primary" disabled={true} > Click me! </button> `;
29. <button - className="btn--primary" + className="button--primary" disabled={true} > Click me! </button>
30. Watch Usage › Press o to only run tests related to changed files. › Press u to update failing snapshots. › Press p to filter by a filename regex pattern. › Press t to filter by a test name regex pattern. › Press q to quit watch mode. › Press Enter to trigger a test run.
31. Common MISCONCEPTIONS
32. Commit your snapshots
33. Different from VRT
34. Any serializable value
35. Jest styled components
36. import styled from 'styled-components' const Button = styled.button` color: blue; `
37. exports[`my button is blue 1`] = ` <button className="jVDqcL" /> `;
38. Did my component change?
39. -<button +<div className="jVDqcL" />
40. Did my styles change?
41. <button - className="jVDqcL" + className="jldpnK" />
42. How did my styles change?
43. import { matcher, serializer } from 'jest-styled-components' expect.addSnapshotSerializer(serializer) expect.extend(matcher) expect(tree).toMatchStyledComponentsSnapshot()
44. exports[`my button is blue 1`] = ` .jVDqcL { color: blue; } <button className="jVDqcL" /> `;
45. - .jVDqcL { - color: blue; + .jldpnK { + color: red; }
46. Follow @fbjest Star facebook/jest Run a codemod
47. What’s next?
48. Michele Bertoli, Dec 2016 “The best testing strategy is not writing tests.”
49. You can’t have failing tests, if you don’t write any test.
50. snapguidist
51. Primary Secondary Disabled test('btn primary', () => {}) test('btn secondary, () => {}) test('btn disabled, () => {})
52. React Styleguidist Style guide generator & component workbench for React.
53. Demo
54. React fix it
55. Reproduce the issue in the browser Reproduce the issue in the test env Collect information Fix the bug
56. Demo
57. Recap
58. Find a painless way to write tests Write moar tests Have fun!
59. Any question?