How our team writes React tests and other stuff too

  • Group tests by render and user behaviours
  • Use a snapshot test to validate render
  • Use GIVEN-WHEN-THEN to describe branching logic
  • Don’t be afraid to stub child components also know in Jest as mocking
  • Don’t re-test functionality of other components
  • Use a single expect statement per test
  • Accept unit testing UI components can be difficult
  • Try use screen.getByRole
  • Isolate complex component logic, and test separately

Group tests by render and user behaviours

  • Provide clarity to the reviewer/collaborator on where to find or add a specific test case
  • Prompt the initial test author(s) to include tests for the two main scenarios that need testing:

Use a snapshot test to validate render

  • Slow down the test suite
  • Slow down the test suite
  • Generate errors in multiple components when making a minor change to a single component.
  • Generate at least 1 snapshot test per component on render to:
  • Mock child components to reduce time to produce snapshots and to reduce the triggering of errors when making changes to components. (See section Don’t be afraid to stub child components).
  • Consider removing existing snapshots and generating new snapshots when making substantial changes to component functionality
  • When refactoring a component you should use the interactive update snapshot mode to update and review any changes to snapshots.
  • Closely review changes to snapshots in PRs as so not miss regressions

Use GIVEN-WHEN-THEN to describe branching logic

  • Write the keywords GIVEN, WHEN, AND, NOT, SHOULD in uppercase to make the structure easy to identify and read.
  • Start with GIVEN before WHEN
  • Strict adherence is not required to the structure, focus should be placed on readability
  • <Counter /> render GIVEN a initial count AND steps great than zero SHOULD display provided count
  • <Counter /> behaviours WHEN a user clicks increase count button GIVEN steps SHOULD display provided count

Don’t be afraid to stub child components

  • Reduce the amount of effort to write a test
  • Increases the speed of snapshot testing
  • Allow you to stub browser behaviours. Not all features of the browser of are emulated in jsdom, and in these scenarios it makes more sense to mock the child component or browser behaviour.

Don’t re-test functionality of child components

Use a single expect per test

  • It’s easier to debug failing tests
  • The test case is easier to read and understand what it is testing for

Accept unit testing UI components can be difficult

  • User scrolling within areas of the page. e.g. A common example of this is browser scrolling, for example, testing that data is loaded when a user scrolls past a threshold.
  • You may be testing for the wrong thing. e.g. Are you testing child components like in the tooltip example above?
  • Your component may be doing too much e.g. Is your component handling the retrieving of data from an API, rendering a list and calculating the printing out of pagination? If your component is doing more than 2–3 things you should consider splitting your component out into smaller components or hooks.
  • Is there another way you could test this? Could I write a simpler test?
  • What would it mean if you didn’t have this test and there was an error in this part of the code?

Try use getByRole

Isolate complex component logic into a hooks and helper functions and test separately

Conclusion

--

--

--

Senior Frontend Web Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to integrate reCaptcha with Spring Boot Application

Extending a Phaser Class to Make Reusable Game Objects

Google cloud functions with Jest-Playwright

React 18’s Future Updates

What is React Server Components?

Starting to test Vue with Jest part — I

How to Get Started Making Manuscript Integrations

8 Most Used Array Operations in JavaScript (ES6+)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Robert Prib

Robert Prib

Senior Frontend Web Developer

More from Medium

⚡️10x speed up your Jest spin-up time by watchman

React Code Architecture

Displaying Data from an API and hiding your API key in a React App

The race of performance optimization using memoization in React