Five steps towards your testing dream
- 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