Maintainable Integration Testing in React

Transcript

2. Matija Marohnić @silvenon
3. Maintainable Integration Testing in React
4. Integration testing Unit testing End-to-end testing
5. Unit testing Are isolated parts of this feature working?
6. Integration testing Is this feature supposed to work?
7. End-to-end testing Does this feature actually work in a real browser?
8. $$$ ¢ E2E Integration Unit Testing pyramid
9. •flaky/brittle •“too much of a hassle” •some features are hard to test Case against
 frontend testing
10. •flaky → pass and fail with the same code •brittle → easily broken Flaky/brittle
11. •an afterthought, something to “deal with later” •not considered an essential part of development “Too much of a hassle”
12. •e.g. some advanced APIs •async doesn’t help, it’s often about timing •developers skip challenging tests, but never return Some features are hard to test
14. •integration tests focus on features •unit tests focus on implementation details Why “mostly integration”?
15. How do you feel after writing a test?
17. –Me “A test is useless if you’re equally likely to make a mistake in the implementation and the test itself.”
18. •usually developers strive towards 100% •important in libraries and APIs •not really in frontend application code Test coverage
19. “You should write tests”
20. Testing in React
21. •simulating events •traversing through the tree •mounting in the DOM or shallow rendering React test utilities
22. Mounting
23. Shallow rendering
24. Shallow vs. mount Unit vs. integration
25. •a complete testing framework •built-in jsdom •powerful assertions •easy mocking Jest
26. •Enzyme •built on top of React’s test utilities •useful high-level API •Nock •imitates a server Companion tools
27. Example: DataGrid
29. •opening a DataGrid displays features of the currently selected layer Testing features Do Don’t •opening a DataGrid makes a certain API request
31. •creating a filter causes features to reduce to an expected set Testing features Do Don’t •creating a filter displays a chip component
32. What about the API?
33. Nock
34. Nock
35. •battle-testing some modules in a cheap way •a disposable crutch during development So when to unit test?
37. If the whole thing works together, chances are that its parts are working as well