Unit vs Integration Testing

In software testing, there is a constant debate about where to focus your effort. The “Testing Pyramid” suggests a hierarchy of tests, with Unit Tests at the bottom (most numerous) and End-to-End (E2E) tests at the top (least numerous).

In React, the line between Unit and Integration tests is notoriously blurry.

1. Unit Testing in React

A true unit test isolates the absolute smallest piece of testable code—a single function or a single, isolated component—and mocks (fakes) all of its dependencies.

Example of a React Unit Test:
Testing a <LikeButton /> completely in isolation. You verify that clicking the button calls a provided onClick prop. You mock the parent component, and you mock the API call that actually saves the like to the database.

Pros of Unit Tests:

They run incredibly fast.
When they fail, it is very obvious exactly which line of code is broken.

Cons of Unit Tests in React:

They are often brittle. If you refactor the internal implementation of the component, the test might break even if the component still works for the user.
They don’t prove the application works. A <LikeButton /> might pass its unit test, but if the parent <Post /> component forgets to pass the correct postId prop to it, the feature is broken in production.

2. Integration Testing in React

Integration tests evaluate how multiple units work together. In React, this usually means rendering a “Container” or “Page” component along with all of its children, and testing the interactions between them.

Example of a React Integration Test:
Testing a <CommentSection /> component. You render it, type text into the child <CommentInput />, click the child <SubmitButton />, and assert that the new comment appears in the child <CommentList />.

You are testing three different child components working together as one feature. (You still usually mock the actual network request to the backend).

Pros of Integration Tests:

High confidence. They closely mimic how a real user interacts with your application.
Refactor-resilient. You can completely rewrite how the child components are structured; as long as the user flow (type -> click -> see comment) works, the test passes.

The Modern Consensus (The Testing Trophy)

Historically, developers were pushed to write 80% Unit Tests and 20% Integration tests.

In modern React development (heavily championed by Kent C. Dodds, creator of React Testing Library), the consensus has shifted to the Testing Trophy shape:

“Write tests. Not too many. Mostly integration.”

Because React components are meant to be composed together, testing them in complete isolation often provides very little value. Focusing your effort on Integration Tests (testing a whole feature at once) provides the highest return on investment (ROI) for confidence vs. development time.

Interview Questions

Q: Why is integration testing often preferred over strict unit testing in React?
A: A <Button> component might pass a unit test perfectly, but if the <Form> component it sits inside doesn’t pass the correct onClick handler down to it, the application is broken in production. Integration tests verify that components actually work together.