ReactTDD.com - JavaScript testing techniques for React applications

Hello and welcome to ReactTDD.com, a blog about better automated testing for React applications. The focus is on test-driven development (TDD) but you’ll also find a lot of general advice on how to write good automated tests.

This website might help you if…

your tests are mostly end-to-end tests and they take forever to run
your tests are flaky (sometimes the pass, sometimes they don’t)
your tests often break when you change your application code
or, you’re new to web application development and want to apply the TDD knowledge you already have

If you find this website useful, please consider buying the book: Mastering React Test-Driven Development, published by Packt. It is a detailed walkthrough of all the concepts contained here on this site, plus examples of how to apply TDD when using React Router, Redux and GraphQL.

Refactoring to React Router

How do you introduce React Router into a React codebase?
MemoryRouter vs HistoryRouter

React Router’s own documentation recommends that you use the MemoryRouter component in your test suites. But it isn’t sufficient for some testing scenarioes.
Component mocks with React Testing Library

If you’re using React Testing Library, you can easily use the mocking techniques that are presented in Mastering React Test-Driven Development.
Alternatives to module mocks in your unit tests

The jest.mock magic function is my default way of mocking components, but there are a couple of other approaches.
Migrating from Jest to Mocha (Part 1)

This post is the beginning of a series on moving from the Jest test runner to Mocha. In this post, I’ll look at the main pieces that need to be changed.
Controlling time within unit tests

When you’re building components that contain date logic, it’s always best to fix the date (and maybe time) within your tests.
Testing regular expressions: a kata

Regular expressions are a flexible mechanism for matching string formats. Test-driving them is a fun exercise. Here’s a regular expression kata you can try out.
When to use the let keyword

Althought you should always prefer const definitions in your application code, there’s one use case where let declarations are useful.
React test mocks cheatsheet

This post is a quick rundown of all the techniques you’ll need to successfully use mocks within your React unit tests.
Understanding act

React’s act function is an essential part of React unit tests. Why, though? What does it do and why do we need it? This post looks at the act function from the perspective of an application developer (like me and you).
Almost there: Mastering React Test-Driven Development, Second Edition

The second edition of Mastering React Test-Driven Development is due for publication soon. This edition has a decent amount of new and updated content.
Beyond TDD: breaking the rules

Rules are made to be broken, right? TDD is a strict set of rules that define a process for building software. But experienced practitioners have moved beyond the rules and work towards something else entirely.
How to achieve 100% coverage with the fewest number of unit tests

One of the first decisions you need to make when testing the rendered output of a component is which parts of it to test. The straightforward TDD answer is obviously all of it, but since we like to be lazy we look for excuses to not do that. Here’s how I decide what to test and what to not.
What is test surface area?

The surface area of a test is all the executed production code that happens within the “act” phase of a test. You can think of this as the code that the test covers, or the coverage of this single test.
Understanding Arrange‑Act‑Assert

If there’s one piece of advice that will help you write better unit tests, it’s this: always, always write your tests in Arrange-Act-Assert order.
Why is unit testing important?

Unit testing has fallen out of fashion within the front-end community. After half a century of structured programming, and twenty years of XP, our industry still struggles to benefit from unit testing. Why is this the case?