How to go about testing in React?

How to go about testing in React?

• 1.
  How to goabout testing in React? Lisa Gagarina @lisa_gagarina lisagagarina17@gmail.com JPMorgan Chase & Co. JavaScript Matters London, 11th March 2019
• 2.
  My talk Is aboutsharing our experience and raising awareness around testing types and tools
• 3.
  My talk Is NOTabout 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 DistributionService Notifications Distribution Service Financial Markets Events Users trigger SMS, Voice, Email, Mobile, real-time messages View notifications feed, manage subscriptions
• 5.
  Technology stacks comparison Oldfrontend 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 wewrite 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] testingis 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: - Widelyused, well documented and supported - Jasmine-like - Built-in assertions, spies, coverage etc. - Minimum configuration - Fast
• 9.
  Jest Is great: - Widelyused, 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 byKent 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 multipletools ● 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 onyour users
• 19.
  Takeaways 1. Focus onyour users 2. Write tests that give you confidence
• 20.
  Takeaways 1. Focus onyour users 2. Write tests that give you confidence 3. Take full advantage of static tests
• 21.
  Takeaways 1. Focus onyour 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 fromthis 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!