Testing with React Hooks and Enzyme

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 Enzyme component tests that use act to wrap code that trigger hooks that do things asynchronously on updates. If I get around to it, I'll make an almost identical copy of this repo using React Testing Library instead of Enzyme. As an aside, RTL is pretty damn opinionated about how we should be writing our tests, but I'll save that discussion for another day.

This project was bootstrapped with Create React App.

Available Scripts

In the project root, you can run:

yarn start

Runs the app in development mode. Open http://localhost:3000 to view it in the browser.

To be honest there's very little to see, but at least you'll know what we are testing.

yarn test

Launches the test runner in interactive watch mode. See running tests for more information.