Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Testing is the process of verifying that your React components work correctly. It's like having a safety net that catches bugs before your users do!
Think of tests as automated checks that run every time you make changes. They ensure your app behaves as expected and give you confidence to refactor and add new features.
Find and fix issues before they reach production and affect users.
Make changes with confidence knowing tests will alert you to problems.
Tests serve as living documentation showing how components should work.
The testing pyramid is a concept that shows how many tests you should have at each level. More unit tests at the bottom, fewer E2E tests at the top.
E2E Tests
Fewer (Slow)
Integration Tests
Moderate (Medium Speed)
Unit Tests
Most (Fast)
Foundation at the bottom → Comprehensive coverage at the top
Test individual components in isolation. Fast and numerous.
"Does this button render correctly?"
Test how multiple components work together.
"Does the form submit and show a success message?"
Test complete user flows in a real browser.
"Can a user sign up, log in, and make a purchase?"
See a simple Counter component in action! This is the kind of component we'll learn to test. Click the buttons to interact with it.
function Counter() {
const [count, setCount] = React.useState(0);
return (
<div style={{
padding: '40px',
textAlign: 'center',
fontFamily: 'system-ui, -apple-system, sans-serif',
maxWidth: '400px',
margin: '0 auto'
}}>
<h2 style={{
color: '#06b6d4',
marginBottom: '20px',
fontSize: '24px'
}}>
Counter Component
</h2>
<div style={{
fontSize: '48px',
fontWeight: 'bold',
color: '#334155',
marginBottom: '30px',
padding: '20px',
background: '#f1f5f9',
borderRadius: '12px'
}}>
{count}
</div>
<div style={{
display: 'flex',
gap: '12px',
justifyContent: 'center',
marginBottom: '20px'
}}>
<button
onClick={() => setCount(count - 1)}
style={{
padding: '12px 24px',
fontSize: '16px',
background: '#ef4444',
color: 'white',
border: 'none',
borderRadius: '8px',
cursor: 'pointer',
fontWeight: '600'
}}
>
Decrement
</button>
<button
onClick={() => setCount(count + 1)}
style={{
padding: '12px 24px',
fontSize: '16px',
background: '#22c55e',
color: 'white',
border: 'none',
borderRadius: '8px',
cursor: 'pointer',
fontWeight: '600'
}}
>
Increment
</button>
</div>
<button
onClick={() => setCount(0)}
style={{
padding: '10px 20px',
fontSize: '14px',
background: '#64748b',
color: 'white',
border: 'none',
borderRadius: '8px',
cursor: 'pointer',
fontWeight: '500'
}}
>
Reset
</button>
</div>
);
}
// Render the component
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Counter />);Loading preview...
React has a rich ecosystem of testing tools. Here are the most important ones you'll use:
A delightful JavaScript testing framework with a focus on simplicity. It comes with everything built-in: test runner, assertions, mocking, and coverage.
The most popular library for testing React components. It encourages testing from the user's perspective, focusing on behavior rather than implementation.
A blazing fast unit test framework powered by Vite. Jest-compatible API with better performance and modern features. Great for Vite projects!
End-to-end testing frameworks that run tests in a real browser. Perfect for testing complete user journeys and workflows across your entire application.
Basic test using Jest and React Testing Library
// Button.jsx
function Button({ onClick, children }) {
return (
<button onClick={onClick} aria-label={children}>
{children}
</button>
);
}
// Button.test.js
import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';
describe('Button Component', () => {
test('renders button with text', () => {
render(<Button>Click Me</Button>);
const button = screen.getByText('Click Me');
expect(button).toBeInTheDocument();
});
test('calls onClick when clicked', () => {
const handleClick = jest.fn();
render(<Button onClick={handleClick}>Click Me</Button>);
const button = screen.getByText('Click Me');
fireEvent.click(button);
expect(handleClick).toHaveBeenCalledTimes(1);
});
});Here's the typical flow when testing a React component:
Render Component
Use render() to mount your component
Query Elements
Find elements using screen.getByText() or similar queries
Interact
Simulate user actions with fireEvent.click() or userEvent
Assert
Verify behavior with expect() assertions
Tests catch bugs early and give you confidence to refactor code safely.
Many unit tests, some integration tests, few E2E tests for optimal coverage.
The recommended tool for testing React components from user's perspective.
Test behavior users see and interact with, not implementation details.
Render → Query → Interact → Assert. That's the testing flow!
Jest, Vitest, Cypress, and Playwright make testing fast and reliable.
Now that you understand testing fundamentals, you're ready to dive deeper! In the next topics, you'll learn: