JazzCon 2018: Effective React Testing

94bd558238b69c45d3d3e15797ae94f7?s=47 Jeremy Fairbank
March 22, 2018
Programming
1
130

JazzCon 2018: Effective React Testing

94bd558238b69c45d3d3e15797ae94f7?s=128

Jeremy Fairbank

March 22, 2018
Tweet

More Decks by Jeremy Fairbank

See All by Jeremy Fairbank
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
1
67
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
1
190
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
0
100
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
0
110
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
0
21
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
2
180
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
1
86
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
2
600
94bd558238b69c45d3d3e15797ae94f7?s=48 jfairbank
0
200

Other Decks in Programming

See All in Programming
98df8bb11748bb59fef1aa1e474e8e02?s=48 komofr
14
6k
D79e3b0b78ca7027eb61d73028d45ad6?s=48 uchi_k
0
380
913963fd6beff0a716f512efd3792065?s=48 hampen2929
1
600
94138d52371ef2791611f01dd41764f4?s=48 joekarlsson
0
120
72a2082c6a4dd79ad68befb3db911616?s=48 mraible
2
840
52711e2157a6fed933b0361cc06a6953?s=48 marcelgsantos
2
120
D65e990ab4df0d0a75c3b0ae5d036bc5?s=48 martinlippert
1
130
3115a782126be714b5f94d24073c957d?s=48 oracle4engineer
0
150
A19876f5694283f26a061746ba82c3b0?s=48 germsvel
0
110
F62b70b58d2f54c3d421a8f19c1c8817?s=48 pictiny
3
170
A1b4b398630bbd32b77a82cbc37fae9a?s=48 freekmurze
1
140
6d64a4d4ab6201f2ce57e3befc687785?s=48 yoshi0202
0
120

Featured

See All Featured
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
222
46k
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
121
20k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
281
46k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
436
28k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
87
12k
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
498
36k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
69
1.3k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
22
1.6k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
165
6.8k
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
330
29k
24fc194843a71f10949be18d5a692682?s=48 gr2m
82
11k
56c4053438af8e8b90d6f53cbb7573be?s=48 jakevdp
769
190k

Transcript

  1. Effective React Testing Jeremy Fairbank @elpapapollo

  2. @testdouble helps improves how the world build software. testdouble.com/agency

  3. In beta now! bit.ly/programming-elm

  4. My shiny new React application…

  5. …without tests.

  6. None
  7. None

  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 $$$ $

  20. None

  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-jazzcon Code: bit.ly/react-testing-jazzcon-code