Summary - Advanced testing
- React course
- Advanced
- Lesson 48/56
- 5 min
Mock a cart flow with MSW and test it.
Summary - Advanced testing
In this group you learned integration testing, fake APIs with MSW and coverage measurement.
With Testing Library you query like a user; with MSW you intercept network calls and return fake responses; with coverage thresholds you protect quality.
Now you will write a test that combines all three.
Practice Write the UserCard test
Write UserCard.test.jsx. Render <UserCard /> with render, find it with screen.getByText('Alex') and assert with expect(...).toBeInTheDocument(). Use test('shows user', () => {}).
Starter code
// Write the UserCard test hereSample solution
import { render, screen } from '@testing-library/react';
import UserCard from './UserCard';
test('shows user', () => {
render(<UserCard />);
expect(screen.getByText('Alex')).toBeInTheDocument();
});Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which of the following is true?
- MSW works only on the client
- 100 percent coverage finds all bugs
- getByText reads internal state
- fireEvent simulates DOM events Correct answer
Explanation: fireEvent simulates events like clicks and typing.
2 Fill in the blank: start the server listening
Question
beforeAll(() => server.____());
Answer
beforeAll(() => server.listen());Explanation: server.listen() starts listening.
3 Match concepts
| Term | Meaning |
|---|---|
render |
Puts into DOM |
setupServer |
Sets up MSW |
thresholds |
Sets lower bound |
getByText |
Finds by text |