What NOT to Assert in React Component Tests

Avoid these test assertions in Jest, React Testing Library tests.

Photo by Kyle Glenn on Unsplash

When I was starting to write React tests, it was really tough. It felt like it requires a completely different mindset to that of writing application code.

One of the most terrifying questions I had was how do I know what I should expect() in React component tests? One cannot answer that in a short blog post. Therefore, to make it more digestible, in this blog post I will only focus on what you should NOT assert in React component tests.

Note: code snippets are based on Jest and React Testing Library (RTL)

Implementation details

“Implementation detail” is a loose term and it might be referred to different things by different people, but what’s very important to understand is the tradeoffs of testing implementation details.

The more your assertions depend on implementation details, the more prone to false positives (test fails although your application logic works as intended) your tests become. It is also commonly referred to as white box testing.

Therefore, you want to depend on implementation details as little as possible. It’s not always feasible, though. For instance, testing DOM class names. I suppose that most people would agree that it is an implementation detail.

However, what if your class name dictates whether the component is visible or hidden? In that case, I’d choose to bite the bullet and assert the class name, because it gives me confidence that the component is visible/hidden correctly.

So the real question is how you should balance testing implementation details. You want to find the golden mean where you get a significant amount of confidence out of the tests and, at the same time, they do not cause too many false positives.

Some specific don’ts to watch out for:

• Relying on DOM structure. Avoid using within() , .children , .parentElement and other attributes/helpers that rely on DOM structure.
• Class names, such as expect(button.className).toContain('with-loader') . You cannot meaningfully test the actual UI with component tests…