Back to Home

React Testing Library

Published on

React Testing

React testing library is an opinionated testing framework, packaged by default with react.

The library https://testing-library.com/docs/ intends to fix the issues caused by other testing frameworks such as Enzyme, that allow for shallow rendering and APIs that deal with instances of components for their state and properties.

Where the main guiding principle of React Testing Library is that the tests should resemble how the software is actually going to be used, ensuring much more stability in tests, and much more straightforward to think about test cases.

Test cases are expected to be behavioural driven, testing how a user may interact with the component / set of components. Rather than testing very specific implementation details that the end user would not care about.

Users cannot directly interact with app's components or have visibility of the internal properties of those components. So why test them?

Okay, sometimes there may be a need to unit test some implementation details, but that should only be for when particular complex logic might make it difficult to perform functional tests, or when there are far too many edge cases. However, the main point with React Testing Library is that Functional Tests should be written as default, with unit tests when there is a use case for.

Functional Tests

It is a different form of testing than unit tests:

Unit Tests

  • Isolated: mock dependencies, tests internals
  • Easy to pinpoint failures
  • Not really how users would interact with software
  • More likely to break with refactoring

Functional Tests

  • Includes relevant units, tests behaviour.
  • close to how users would interact with software
  • Robust tests
  • Might be more difficult to debug specific failing tests

React Testing Library

By default, uses Jest as it's test runner, however it is a flexible framework, so it may allow any other test runner.

React Testing library provides its own virtual DOM, that would render out the application similarly to what the user would see.

Due to the virtual DOM, requirements for good development practices such as accessibily requirements are easier to test, and understand. React Testing Library is opinionated in the way it prioritises testing components in a way that takes into account accessibility, https://testing-library.com/docs/queries/about/, and tests components that a user would be able to see and interact with, discouraging the use of magic component ids to navigate through DOM elements.

In the end, use of the React Testing Library delivers more robust tests that are more maintainable in the long run. Code can be optimised, and other packages can be swapped in without breaking tests. Tests are also written more straightforward than specific unit tests, and can be closer related to software requirements. And lastly, the developers behind React Testing Library know the importance of accessibility, tests can be written accessibility minded first, vs the usual situation of it being left as an afterthought.