The document outlines five steps towards improving testing: 1. Use static code analysis tools to detect errors before runtime. 2. Gain more value from snapshot testing by snapshotting small components and using inline snapshots. 3. Build confidence in tests by writing tests that resemble user interactions and are implementation agnostic. 4. Create reliable end-to-end tests by running them in the same run loop as the app to improve debugging. 5. Focus testing efforts on what works best for the specific project and team.

1. Five Steps Towards Your Testing Dream
Lisa Gagarina
@lisa_gagarina
JPMorgan Chase & Co.
ReactEurope
Paris, 23-24th
May 2019

2. Step 1: Use static code analysis tools
What is wrong?
● Syntax and type errors at runtime
● Inconsistent code style
● Noisy, unnecessary unit tests

3. Step 1: Use static code analysis tools
What is wrong?
● Syntax and type errors at runtime
● Inconsistent code style
● Noisy, unnecessary unit tests
What to do?
● Use linter and static typing to
discover problems with your code
before you run it
● Use code formatter to automatically
style your code
Tools: ESLint, Prettier, TypeScript

4. Step 2: Gain more value from Jest snapshot testing
What is wrong?
● Too many, too big
● False negative failures
● Hard to code review
● Unclear intention
● False impression of good coverage

5. Step 2: Gain more value from Jest snapshot testing
What is wrong?
● Too many, too big
● False negative failures
● Hard to code review
● Unclear intention
● False impression of good coverage
What to do?
● Snapshot small static components
● Use inline and diff snapshots
● Use snapshots beyond React
Tools: Jest + ESLint (jest/no-large-snapshots,
jest/prefer-inline-snapshots),
npm snapshot-diff

6. What is wrong?
Step 3: Build up confidence in your tests
are hard to write
fail on non-breaking refactoring
pass when user experience is
broken
allow regressions and bugs to
creep in
TESTS

7. What is wrong?
Step 3: Build up confidence in your tests
are hard to write
fail on non-breaking refactoring
pass when user experience is
broken
allow regressions and bugs to
creep in
TESTS
What to do?
Write tests that:
● resemble how users interact
with your components
● are agnostic to implementation
details
● give you confidence in your
code
Tools: Jest + React Testing Library

8. What is wrong?
End-to-end tests are:
● hard to set up and write
● slow and flaky
● hard to debug
Step 4: Create reliable end-to-end tests

9. Step 4: Create reliable end-to-end tests
What to do?
● Run end-to-end tests in the same
run-loop as your application
● Control your application fully
● Debug efficiently
Tools: Cypress
What is wrong?
End-to-end tests are:
● hard to set up and write
● slow and flaky
● hard to debug

10. Step 5: Focus on what works for your project and
your team

11. Full recording of my talk at JavaScript Matters meetup in London:
https://skillsmatter.com/skillscasts/13054-javascript-matters
Learn more

12. ● Kent C. Dodds: Write tests. Not too many. Mostly integration.
● Kent C. Dodds: Why I Never Use Shallow Rendering
● Kent C. Dodds: Testing JavaScript
● Lyudmil Latinov: Cypress vs. Selenium, is this the end of an era?
● Cypress: Key Differences
● Artem Sapegin: What’s wrong with snapshot tests
Learn more

13. Thank you
Lisa Gagarina
@lisa_gagarina
JPMorgan Chase & Co.
ReactEurope
Paris, 23-24th
May 2019