Rethinking Testing for React Applications

Transcript

1. Rethinking Testing for React Applications
2. Tommy Graves Lead Software Engineer, New Channels !2 Twitter: @TAGraves Email: tommy@joinroot.com
3. • High level discussion of what testing is for • Three antipatterns that tests can fall into • The big reveal: a testing pattern that avoids those antipatterns !3 A quick overview
4. • To prevent defects in new code • To ensure changes don't break existing functionality • To document the intention of the authors of a section of code • To drive the implementation of code? !4 Why do we test?
5. !5 Testing is about confidence!
6. What leads to confidence? !6
7. What leads to confidence? !7
8. Antipattern #1: Testing implementation details instead of behavior !8
9. Can the tests fail, but the code work? !9
10. The hooks rule !10
11. Antipattern #2: Testing the code instead of the application !11
12. Can the tests pass, but the code not work? !12
13. The machine- generated rule !13
14. Antipattern #3: Testing in isolation (for isolation's sake) !14
15. Do your tests care about how things really work? !15
16. !16 The testing pyramid Unit Tests: • Fast • Deterministic • Easy to write • Easy to diagnose • Isolated confidence Integration Tests: • Slow • Flaky • Hard to write • Hard to diagnose • Overall confidence
17. !17 Mocks are trade-offs Mocks make tests: • Faster • More deterministic • Easier to write • Easier to diagnose • Less confidence-giving
18. !18 Testing is about confidence!
19. !19 Rethinking Integration Integration tests can be • Fast • Deterministic • Easy to write
20. The TDD rule !20
21. !21 • Testing implementation details instead of behavior • Testing the code instead of the application • Testing in isolation (for isolation's sake) The three antipatterns
22. !22 React Testing Library
23. What leads to confidence? !23
24. Testing from the user's perspective !24
25. !25 Test-Driven UI Development
26. !26
27. Confidential – for internal use only !27
28. Thank you! tommy@joinroot.com