Behaviour tests survive a refactor; implementation tests don't
Both versions behave the same, yet the class-name test fails for v2: a false alarm. The last rendered button stays on the page; click it to see it works.
Tests are small programs that use your app and check the result; good React tests check behaviour a user can see, not how the component is built inside, so they catch real bugs and survive refactors.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Rewrite this implementation-detail test as a behaviour test: expect(container.querySelector(".badge").dataset.count).toBe("3") for a component that shows 3 new messages.
Write a unit test (with the live helper) for function initials(name) that returns "AK" for "Asha Kumar".
Explain it without notes
What is the difference between a unit, an integration and an end-to-end test? Give a React example of each.
What is the testing trophy and why does it put integration tests in the middle?
What does "test behaviour, not implementation details" mean, and why does it matter?
What should you not test in a React app?
Preview
Console
Nothing logged yet.Expected console output
✓ v1 clicking adds a like
✓ v1 has the .count class
✓ v2 clicking adds a like
✗ v2 has the .count class: expected true, got false