Testing with React Hooks and the React Testing Library

React 16.8 officially introduced Hooks, and everyone celebrated the death of javascript classes! Only joking, Typescript fans. Jeez, so touchy.

Hooks are great, but the React community was not fully prepared for all their knock-on effects. These included a funky new API for wrapping some of our test code, which a quick websearch shows caused some considerable confusion, not least because an asynchronous flavour of act was not provided for working with, say, hooks that trigger a data fetch. Async act arrived later on (asynchronously, you might say) with React 16.9.

This repo is a teeny tiny example of some React Testing Library component tests that use act, mostly implicitly but occasionally explicitly, to wrap code that triggers hooks that do things asynchronously on component updates.

It is worth noting that Testing Library is quite opinionated about how tests should be written; if you've ever written browser-based tests (using Selenium, etc) then these will feel familiar, as they query elements in a rendered DOM rather than using knowledge about the component tree. One distinct advantage of the RTL approach is that it encourages writing good code with accessibility in mind, for example, ensuring elements have roles, labels and alt-text where appropriate, as these are the primary methods of finding rendered elements in tests.

For an alternative approach that uses Enzyme, see act-example-enzyme.

This project was bootstrapped with Create React App.