Presentation for my talk at the JavaScript Matters meetup organized by Skills Matter on 11/03/2019 in London, UK.

1. How to go about testing in React?
Lisa Gagarina
@lisa_gagarina
lisagagarina17@gmail.com
JPMorgan Chase & Co.
JavaScript Matters
London, 11th
March 2019

2. My talk
Is about sharing our experience and
raising awareness around testing
types and tools

3. My talk
Is NOT about giving you a magical
solution or convincing you to use a
particular tool
Is about sharing our experience and
raising awareness around testing
types and tools

4. Project: Notifications Distribution Service
Notifications
Distribution Service
Financial Markets Events
Users
trigger
SMS, Voice, Email, Mobile,
real-time messages
View notifications feed,
manage subscriptions

5. Technology stacks comparison
Old frontend app New frontend app
JS Framework, state
management
AngularJS (1.x) React, Redux
Task runner / module bundler Grunt Webpack
Static code analysis JSHint ESLint, Prettier
Styling CSS CSS-in-JS
IDE / Code Editor Intellij VSCode
Testing Karma, Jasmine
Protractor, Selenium
Jest, Enzyme

6. Why do we write tests?
● To make sure everything works as expected
● To write better code
● To automate manual testing
● To protect code from breakage
● To provide documentation

7. Why [frontend] testing is so hard?
● The closest to end users
● You can test a lot
● You can use a lot of tools
● It is hard to define a testing strategy

8. Jest
Is great:
- Widely used, well documented and
supported
- Jasmine-like
- Built-in assertions, spies, coverage etc.
- Minimum configuration
- Fast

9. Jest
Is great:
- Widely used, well documented and
supported
- Jasmine-like
- Built-in assertions, spies, coverage etc.
- Minimum configuration
- Fast
And challenging:
- Mocking
- Snapshots
Demo:
snapshot-tests/Notification.test.js

10. Jest snapshot tests: red flags
● Too many, too big
● False negative failures
● Hard to PR
● Unclear intention
● False impression of good coverage
● Located separately from tested code

11. Jest snapshot tests: advices
● Limit usage to small static components
● Delete all useless snapshots
● Limit snapshot size (use ESLint jest/no-large-snapshots)
● Take advantage of inline snapshots
Demo: LikeButton.test.js
● Consider using diff snapshots
Demo: NotificationHeader.test.js
● Consider using beyond React components

12. Enzyme unit tests: concerns
● Different types of rendering: shallow, mount, static
● Shallow rendering:
○ tests are coupled to implementation
○ tests fail on refactoring
○ tests pass but component is broken
● Lack of confidence
Demo: Notification.enzyme.test.js

13. React Testing Library (by Kent Dodds)
What?
● Avoid testing implementation
details
● Focus on how users use your
application
● Allow for refactoring without
breaking tests
● Increase confidence in your tests

14. React Testing Library (by Kent Dodds)
What?
● Avoid testing implementation
details
● Focus on how users use your
application
● Allow for refactoring without
breaking tests
● Increase confidence in your tests
How?
● No shallow rendering
● Always renders your components in
the DOM (jsdom)
● No way to interact with component
instances, props, state etc.
● Queries the DOM how real user
would

15. React Testing Library (by Kent Dodds)
Demo:
1. Unit tests:
Notification.test.js compared with Notification.enzyme.test.js, NotificationHeader.test.js
2. Integration test: App.test.js

16. Testing trophy by Kent Dodds
1. Static tests
ESLint, TypeScript, Flow
2. Unit tests
Jest, React Testing Library
3. Integration tests
Jest, React Testing Library, Cypress
4. End to End tests
Cypress

17. Cypress
● Bundles multiple tools
● Runs inside a browser
● Gives you full control over your application
● Eliminates flaky tests
● Provides debuggability, rich UI, time travel
Demo: cypress/integration/notification.spec.js

18. Takeaways
1. Focus on your users

19. Takeaways
1. Focus on your users
2. Write tests that give you confidence

20. Takeaways
1. Focus on your users
2. Write tests that give you confidence
3. Take full advantage of static tests

21. Takeaways
1. Focus on your users
2. Write tests that give you confidence
3. Take full advantage of static tests
4. Define test strategy that works for your project and your team

22. Links
● Demo from this presentation
● Write tests. Not too many. Mostly integration.
● Why I Never Use Shallow Rendering
● Testing JavaScript
● Cypress vs. Selenium, is this the end of an era?

23. Thank you!