Execute React Tests 100x Faster Without Sacrificing Accuracy

A humble pattern for React that makes testing with react insanely fast

Prompted and edited by the Author.

In various articles, I have discussed the direct relationship between testing speed and code quality: the faster the testing, the higher the code quality. However, having fast tests isn’t always easy. And often, making tests faster means making them slower first. Well, in this article, I present an adaptation of an old pattern that enormously accelerates tests.

What’s holding us back?

When we’re talking about React components, we’re talking about the outermost layer of the application: the one that communicates with the client. Here, how it communicates with the browser — or with the native part — comes into play and tends to be the slowest part.

And depending on how we need to communicate with the browser, and what to do, we can choose which kind of tests we can implement. We can think about e2e tests, the slowest ones. So, other kinds of tests, like the unit tests are faster, and we can emulate most of the browser behavior required for React when using JSDOM. So, we…