Writing component behavior tests

Opening your lesson

A component test should describe what a person can observe. Mount a component, find a named control, perform an interaction, and inspect the rendered result. Reading a private state variable can pass even when the button is disconnected. Testing only one click can also miss a boundary that fails after repeated actions.

You'll write an executable test function in a separate file. The preview supplies a correct reservation component and two versions with realistic regressions. Your function must accept the correct version and reject both broken versions using the same test. Wait for React to commit each batch of interactions before reading the output, and unmount the test root when you finish. Later fixtures change the starting count and capacity so the test must describe behavior rather than sample numbers.

const mounted = await window.mountCounter(Component);
const add = mounted.el.querySelector('[aria-label="Add"]');
add.click();
// Wait for the rendered result, inspect it, then call mounted.dispose().

Interact with the DOM produced by the component and clean up the mounted root.

Choose your character

Your Work Gym account