JazzCon 2018: Effective React Testing

Slide 1

Slide 1 text

Effective React Testing Jeremy Fairbank @elpapapollo

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

In beta now! bit.ly/programming-elm

Slide 4

Slide 4 text

My shiny new React application…

Slide 5

Slide 5 text

…without tests.

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

API Design

Slide 9

Slide 9 text

Refactoring

Slide 10

Slide 10 text

Slide 11

Slide 11 text

redux-thunk +

Slide 12

Slide 12 text

Components Test expected output.

Slide 13

Slide 13 text

Reducer Test state changes as expected.

Slide 14

Slide 14 text

Actions Test actions through reducer tests. Test thunks for coordination.

Slide 15

Slide 15 text

E2E Integration Unit Snapshot $$$ $

Slide 16

Slide 16 text

E2E Integration Unit Snapshot $$$ $

Slide 17

Slide 17 text

E2E Integration Unit Snapshot $$$ $

Slide 18

Slide 18 text

E2E Integration Unit Snapshot $$$ $

Slide 19

Slide 19 text

E2E Integration Unit Snapshot $$$ $

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Jest facebook.github.io/jest

Slide 22

Slide 22 text

1. Automatic with create-react-app 2. Or add yourself:  yarn add jest  npm install --save jest

Slide 23

Slide 23 text

Enzyme JavaScript testing utilities for React. github.com/airbnb/enzyme yarn add enzyme enzyme-adapter-react-16

Slide 24

Slide 24 text

TDD with Components expect "Hello. I'm Jeremy from Test Double."

Slide 25

Slide 25 text

DEMO

Slide 26

Slide 26 text

Unit Tests Recap

Slide 27

Slide 27 text

Unit Tests Recap

Slide 28

Slide 28 text

Unit Tests Recap Easy to write

Slide 29

Slide 29 text

Unit Tests Recap Easy to write Fast

Slide 30

Slide 30 text

Unit Tests Recap Easy to write Fast Isolated design feedback

Slide 31

Slide 31 text

Unit Tests Recap Easy to write Fast Isolated design feedback

Slide 32

Slide 32 text

Unit Tests Recap Easy to write Fast Isolated design feedback Tedious to test all components

Slide 33

Slide 33 text

Unit Tests Recap Easy to write Fast Isolated design feedback Tedious to test all components Coupled to implementation

Slide 34

Slide 34 text

Unit Tests Recap Easy to write Fast Isolated design feedback Tedious to test all components Coupled to implementation No interaction with other components

Slide 35

Slide 35 text

Snapshot Tests Recap

Slide 36

Slide 36 text

Snapshot Tests Recap

Slide 37

Slide 37 text

Snapshot Tests Recap Easily test component tree

Slide 38

Slide 38 text

Snapshot Tests Recap Easily test component tree Fast

Slide 39

Slide 39 text

Snapshot Tests Recap Easily test component tree Fast Fill in test gaps quickly

Slide 40

Slide 40 text

Snapshot Tests Recap Easily test component tree Fast Fill in test gaps quickly Regression safety

Slide 41

Slide 41 text

Snapshot Tests Recap Easily test component tree Fast Fill in test gaps quickly Regression safety

Slide 42

Slide 42 text

Snapshot Tests Recap Easily test component tree Fast Fill in test gaps quickly Regression safety No design feedback

Slide 43

Slide 43 text

Snapshot Tests Recap Easily test component tree Fast Fill in test gaps quickly Regression safety No design feedback Break from markup changes

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Integration Tests Recap

Slide 46

Slide 46 text

Integration Tests Recap ⚙⚙

Slide 47

Slide 47 text

Integration Tests Recap ⚙ Test component’s interaction with child components ⚙

Slide 48

Slide 48 text

Integration Tests Recap ⚙ Test component’s interaction with child components ⚙

Slide 49

Slide 49 text

Integration Tests Recap ⚙ Test component’s interaction with child components Coupled to child component implementation ⚙

Slide 50

Slide 50 text

Integration Tests Recap ⚙ Test component’s interaction with child components Coupled to child component implementation Redundant test coverage ⚙

Slide 51

Slide 51 text

Integration Tests Recap ⚙ Test component’s interaction with child components Coupled to child component implementation Redundant test coverage Harder to debug ⚙

Slide 52

Slide 52 text

E2E Integration Unit Snapshot $$$ $

Slide 53

Slide 53 text

E2E Integration Unit Snapshot $$$ $

Slide 54

Slide 54 text

Reducer Action New State State Testing Redux

Slide 55

Slide 55 text

DEMO

Slide 56

Slide 56 text

Unit Tests “Redux”

Slide 57

Slide 57 text

Unit Tests “Redux”

Slide 58

Slide 58 text

Unit Tests “Redux” Easier to write Fast Isolated design feedback

Slide 59

Slide 59 text

Unit Tests “Redux” Easier to write Fast Isolated design feedback

Slide 60

Slide 60 text

Unit Tests “Redux” Easier to write Fast Isolated design feedback Thunk tests coupled to implementation

Slide 61

Slide 61 text

Unit Tests “Redux” Easier to write Fast Isolated design feedback Thunk tests coupled to implementation No interaction with the rest of the application

Slide 62

Slide 62 text

Integration Tests “Redux”

Slide 63

Slide 63 text

Integration Tests “Redux” ⚙⚙

Slide 64

Slide 64 text

Integration Tests “Redux” ⚙ Test reducer, actions, and API library together ⚙

Slide 65

Slide 65 text

Integration Tests “Redux” ⚙ Test reducer, actions, and API library together Test entire application ⚙

Slide 66

Slide 66 text

Integration Tests “Redux” ⚙ Test reducer, actions, and API library together Test entire application ⚙

Slide 67

Slide 67 text

Integration Tests “Redux” ⚙ Test reducer, actions, and API library together Test entire application More setup ⚙

Slide 68

Slide 68 text

Integration Tests “Redux” ⚙ Test reducer, actions, and API library together Test entire application More setup Harder to debug ⚙

Slide 69

Slide 69 text

Integration Tests “Redux” ⚙ Test reducer, actions, and API library together Test entire application More setup Harder to debug Doesn’t test user interaction ⚙

Slide 70

Slide 70 text

End-to-end Testing

Slide 71

Slide 71 text

Test entire application in browser End-to-end Testing

Slide 72

Slide 72 text

Test entire application in browser Simulate user interactions End-to-end Testing

Slide 73

Slide 73 text

Test entire application in browser Simulate user interactions Interact with a real API (with test data) End-to-end Testing

Slide 74

Slide 74 text

Test entire application in browser Simulate user interactions Interact with a real API (with test data) Focus on happy path End-to-end Testing

Slide 75

Slide 75 text

yarn add cypress

Slide 76

Slide 76 text

DEMO

Slide 77

Slide 77 text

E2E Tests Recap

Slide 78

Slide 78 text

E2E Tests Recap

Slide 79

Slide 79 text

E2E Tests Recap Test all pieces working together in user scenarios

Slide 80

Slide 80 text

E2E Tests Recap Test all pieces working together in user scenarios Cypress makes E2E pleasant and easier to debug

Slide 81

Slide 81 text

E2E Tests Recap Test all pieces working together in user scenarios Cypress makes E2E pleasant and easier to debug

Slide 82

Slide 82 text

E2E Tests Recap Test all pieces working together in user scenarios Cypress makes E2E pleasant and easier to debug Slow

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

E2E Integration Unit Snapshot $$$ $

Slide 86

Slide 86 text

Snapshot E2E Integration Unit $$$ $

Slide 87

Slide 87 text

Write tests!

Slide 88

Slide 88 text

Thank you! Jeremy Fairbank @elpapapollo Slides: bit.ly/react-testing-jazzcon Code: bit.ly/react-testing-jazzcon-code