React Testing Library (RTL) is a popular tool among developers for testing react components. It provides utilities that simulate real user interactions, enabling more user-focused testing.
Unlike Enzyme, RTL does not support shallow rendering, which limits rendering to one level deep.
However, you can achieve similar isolation by mocking child components. This approach allows you to focus solely on the component under test without dealing with the details of its children.
Why Aim for Shallow Rendering in RTL?
Shallow rendering offers several benefits:
- Isolation: Focus on the component under test, reducing dependency on child components’ implementations.
- Improved Performance: Avoid unnecessary rendering of deeply nested components, speeding up tests.
- Simplified Setup: Handle components with complex dependencies like Redux stores or context providers more easily.
Usecase:
1. Improving Test Performance: Mocking CPU-Intensive Components
Imagine a React component ParentComponent that renders a CPUIntensiveChild component. The child component performs CPU-heavy computations, which can significantly slow down your tests.
Without mocking:
import { render } from ‘@testing-library/react’;
import ParentComponent from ‘./ParentComponent’;
console.time(‘Without Mocking’);
render(<ParentComponent />);
console.timeEnd(‘Without Mocking’);With mocking:
jest.mock(‘./CPUIntensiveChild’, () => () => ‘Mocked CPU Component’);
console.time(‘With Mocking’);
render(<ParentComponent />);
console.timeEnd(‘With Mocking’);
Result:
Without Mocking: 15.88 ms and with Mocking: 0.48 ms.
A drastic improvement in test execution time!
2. Simplifying Redux-Dependent Components
Suppose you have a ChildComponent that depends on a Redux store:
const ChildComponent = () => {
const data = useSelector((state) => state.data);
return <div>{data}</div>;
};Now, consider ParentComponent, which renders ChildComponent:
const ParentComponent = () => (
<div>
<h1>Parent</h1>
<ChildComponent />
</div>
);
To test ParentComponent without mocking, you’d need to set up a Redux store for ChildComponent, increasing complexity and the likelihood of test failures unrelated to ParentComponent.
To test ParentComponent without worrying about Redux store setup in ChildComponent, you can mock the child:
jest.mock(‘./ChildComponent’, () => () => ‘Mocked Child Component’);
test(‘renders ParentComponent correctly’, () => {
const { getByText } = render(<ParentComponent />);
expect(getByText(‘Parent’)).toBeInTheDocument();
expect(getByText(‘Mocked Child Component’)).toBeInTheDocument();
});
Key Takeaways
- Mocking child components in RTL simplifies tests and enhances performance.
- Focused testing reduces complexity and improves reliability, especially for CPU-intensive or dependency-heavy components.
- Incorporating these strategies leads to better testing practices and higher-quality React applications.
Happy testing!
Focused Component Testing in RTL was originally published in Walmart Global Tech Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.
Introduction to Malware Binary Triage (IMBT) Course
Looking to level up your skills? Get 10% off using coupon code: MWNEWS10 for any flavor.
Enroll Now and Save 10%: Coupon Code MWNEWS10
Note: Affiliate link – your enrollment helps support this platform at no extra cost to you.