Module · Frontend Engineer
Testing Frontend Code
Testing behaviour instead of implementation, and keeping the e2e suite small.
TOPIC 01
Component Tests
Render it like a user would, query it the way a user would.
What you'll practice
- Test the Way a User Sees It — guided · beginner
- Test Behaviour, Not Implementation — practice · intermediate
A command you'll meet
cat ~/tests/component.mdA test that breaks when you rename a variable is a tax, not a safety net. Open the task below for the full walkthrough.
Hands-On Tasks in This Topic (2)
Test the Way a User Sees It
Testing library React renders the component and queries it the way a screen reader would. Write the approach your team follows.
Test Behaviour, Not Implementation
The value of a test is what it protects. Write the rule that keeps the suite about behaviour.
TOPIC 02
E2E & Mocks
The slow suite you keep small, and the network you fake in the fast one.
What you'll practice
- Keep the E2E Suite Small — practice · intermediate
- Mock the Network, Not the Code — challenge · advanced
A command you'll meet
cat ~/tests/e2e.mdThe end-to-end suite is the most expensive test you own. Open the task below for the full walkthrough.
Hands-On Tasks in This Topic (2)
Keep the E2E Suite Small
One end-to-end test should be worth the minutes it costs. Write the rules for the suite that ships with the product.
Mock the Network, Not the Code
Mocking your own modules means every test asserts your implementation. Mocking at the network boundary keeps the test honest. Write the handler plan.