Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Matija Marohnić @silvenon

Slide 3

Slide 3 text

Maintainable Integration Testing in React

Slide 4

Slide 4 text

Integration testing Unit testing End-to-end testing

Slide 5

Slide 5 text

Unit testing Are isolated parts of this feature working?

Slide 6

Slide 6 text

Integration testing Is this feature supposed to work?

Slide 7

Slide 7 text

End-to-end testing Does this feature actually work in a real browser?

Slide 8

Slide 8 text

$$$ ¢ E2E Integration Unit Testing pyramid

Slide 9

Slide 9 text

•flaky/brittle •“too much of a hassle” •some features are hard to test Case against
 frontend testing

Slide 10

Slide 10 text

•flaky → pass and fail with the same code •brittle → easily broken Flaky/brittle

Slide 11

Slide 11 text

•an afterthought, something to “deal with later” •not considered an essential part of development “Too much of a hassle”

Slide 12

Slide 12 text

•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

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

•integration tests focus on features •unit tests focus on implementation details Why “mostly integration”?

Slide 15

Slide 15 text

How do you feel after writing a test?

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

–Me “A test is useless if you’re equally likely to make a mistake in the implementation and the test itself.”

Slide 18

Slide 18 text

•usually developers strive towards 100% •important in libraries and APIs •not really in frontend application code Test coverage

Slide 19

Slide 19 text

“You should write tests”

Slide 20

Slide 20 text

Testing in React

Slide 21

Slide 21 text

•simulating events •traversing through the tree •mounting in the DOM or shallow rendering React test utilities

Slide 22

Slide 22 text

Mounting

Slide 23

Slide 23 text

Shallow rendering

Slide 24

Slide 24 text

Shallow vs. mount Unit vs. integration

Slide 25

Slide 25 text

•a complete testing framework •built-in jsdom •powerful assertions •easy mocking Jest

Slide 26

Slide 26 text

•Enzyme •built on top of React’s test utilities •useful high-level API •Nock •imitates a server Companion tools

Slide 27

Slide 27 text

Example: DataGrid

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

•opening a DataGrid displays features of the currently selected layer Testing features Do Don’t •opening a DataGrid makes a certain API request

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

•creating a filter causes features to reduce to an expected set Testing features Do Don’t •creating a filter displays a chip component

Slide 32

Slide 32 text

What about the API?

Slide 33

Slide 33 text

Nock

Slide 34

Slide 34 text

Nock

Slide 35

Slide 35 text

•battle-testing some modules in a cheap way •a disposable crutch during development So when to unit test?

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

If the whole thing works together, chances are that its parts are working as well