Connect.Tech 2018: Effective React Testing

Building applications with React is a cinch these days. But what about testing? In this talk, learn how to create an effective plan for testing a React and Redux application from the ground up. You will learn about the testing framework Jest, how to unit test React components with logic, the magic and trade-offs of snapshot testing, how to test Redux, and how to end-to-end test your entire application. You will leave this talk ready to effectively test your React applications.

Transcript

1. Effective React Testing Jeremy Fairbank @elpapapollo
2. @testdouble helps improves how the world build software. testdouble.com/agency
3. bit.ly/programming-elm
4. My shiny new React application…
5. …without tests.
8. API Design
9. Refactoring
10. ?
11. redux-thunk +
12. Components Test expected output.
13. Reducer Test state changes as expected.
14. Actions Test actions through reducer tests. Test thunks for coordination.
15. E2E Integration Unit Snapshot $$$ $
16. E2E Integration Unit Snapshot $$$ $
17. E2E Integration Unit Snapshot $$$ $
18. E2E Integration Unit Snapshot $$$ $
19. E2E Integration Unit Snapshot $$$ $
21. Jest facebook.github.io/jest
22. 1. Automatic with create-react-app 2. Or add yourself:
 yarn add jest
 npm install --save jest
23. Enzyme JavaScript testing utilities for React. github.com/airbnb/enzyme yarn add enzyme enzyme-adapter-react-16
24. TDD with Components <NameTag name="Jeremy" employer="Test Double" /> expect "Hello. I'm Jeremy from Test Double."
25. DEMO
26. Unit Tests Recap
27. Unit Tests Recap
28. Unit Tests Recap Easy to write
29. Unit Tests Recap Easy to write Fast
30. Unit Tests Recap Easy to write Fast Isolated design feedback
31. Unit Tests Recap Easy to write Fast Isolated design feedback
32. Unit Tests Recap Easy to write Fast Isolated design feedback Tedious to test all components
33. Unit Tests Recap Easy to write Fast Isolated design feedback Tedious to test all components Coupled to implementation
34. Unit Tests Recap Easy to write Fast Isolated design feedback Tedious to test all components Coupled to implementation No interaction with other components
35. Snapshot Tests Recap
36. Snapshot Tests Recap
37. Snapshot Tests Recap Easily test component tree
38. Snapshot Tests Recap Easily test component tree Fast
39. Snapshot Tests Recap Easily test component tree Fast Fill in test gaps quickly
40. Snapshot Tests Recap Easily test component tree Fast Fill in test gaps quickly Regression safety
41. Snapshot Tests Recap Easily test component tree Fast Fill in test gaps quickly Regression safety
42. Snapshot Tests Recap Easily test component tree Fast Fill in test gaps quickly Regression safety No design feedback
43. Snapshot Tests Recap Easily test component tree Fast Fill in test gaps quickly Regression safety No design feedback Break from markup changes
44. Snapshot Tests Recap Easily test component tree Fast Fill in test gaps quickly Regression safety No design feedback Break from markup changes Prone to human error
45. Integration Tests Recap
46. Integration Tests Recap ⚙⚙
47. Integration Tests Recap ⚙ Test component’s interaction with child components ⚙
48. Integration Tests Recap ⚙ Test component’s interaction with child components ⚙
49. Integration Tests Recap ⚙ Test component’s interaction with child components Coupled to child component implementation ⚙
50. Integration Tests Recap ⚙ Test component’s interaction with child components Coupled to child component implementation Redundant test coverage ⚙
51. Integration Tests Recap ⚙ Test component’s interaction with child components Coupled to child component implementation Redundant test coverage Harder to debug ⚙
52. E2E Integration Unit Snapshot $$$ $
53. E2E Integration Unit Snapshot $$$ $
54. Reducer Action New State State Testing Redux
55. DEMO
56. Unit Tests “Redux”
57. Unit Tests “Redux”
58. Unit Tests “Redux” Easier to write Fast Isolated design feedback
59. Unit Tests “Redux” Easier to write Fast Isolated design feedback
60. Unit Tests “Redux” Easier to write Fast Isolated design feedback Thunk tests coupled to implementation
61. Unit Tests “Redux” Easier to write Fast Isolated design feedback Thunk tests coupled to implementation No interaction with the rest of the application
62. Integration Tests “Redux”
63. Integration Tests “Redux” ⚙⚙
64. Integration Tests “Redux” ⚙ Test reducer, actions, and API library together ⚙
65. Integration Tests “Redux” ⚙ Test reducer, actions, and API library together Test entire application ⚙
66. Integration Tests “Redux” ⚙ Test reducer, actions, and API library together Test entire application ⚙
67. Integration Tests “Redux” ⚙ Test reducer, actions, and API library together Test entire application More setup ⚙
68. Integration Tests “Redux” ⚙ Test reducer, actions, and API library together Test entire application More setup Harder to debug ⚙
69. Integration Tests “Redux” ⚙ Test reducer, actions, and API library together Test entire application More setup Harder to debug Doesn’t test user interaction ⚙
70. End-to-end Testing
71. Test entire application in browser End-to-end Testing
72. Test entire application in browser Simulate user interactions End-to-end Testing
73. Test entire application in browser Simulate user interactions Interact with a real API (with test data) End-to-end Testing
74. Test entire application in browser Simulate user interactions Interact with a real API (with test data) Focus on happy path End-to-end Testing
75. yarn add cypress
76. DEMO
77. E2E Tests Recap
78. E2E Tests Recap
79. E2E Tests Recap Test all pieces working together in user scenarios
80. E2E Tests Recap Test all pieces working together in user scenarios Cypress makes E2E pleasant and easier to debug
81. E2E Tests Recap Test all pieces working together in user scenarios Cypress makes E2E pleasant and easier to debug
82. E2E Tests Recap Test all pieces working together in user scenarios Cypress makes E2E pleasant and easier to debug Slow
83. E2E Tests Recap Test all pieces working together in user scenarios Cypress makes E2E pleasant and easier to debug Slow Break from markup changes or pepper source code with identifiers
84. E2E Tests Recap Test all pieces working together in user scenarios Cypress makes E2E pleasant and easier to debug Slow Break from markup changes or pepper source code with identifiers Still harder to debug than unit tests
85. E2E Integration Unit Snapshot $$$ $
86. Snapshot E2E Integration Unit $$$ $
87. Write tests!
88. Thank you! Jeremy Fairbank @elpapapollo Slides: bit.ly/react-testing-ct Code: github.com/jfairbank/effective-react-testing