Test Component Boundaries
One common pattern that we have used in the word counter is lifting the state into a parent component and updating its children via props. A good way to test is to instantiate the parent component, trigger some events on it, and check whether the children update correctly.
For this type of test, it’s enough to render a component and its immediate children. Skipping the creation of the whole DOM structure will speed up the tests considerably. To perform this shallow rendering, we’ll use a library called Enzyme.[16] We’ll construct an element and its immediate children, then simulate the user interaction on the parent, and check that the changes propagate correctly to the children.
Start by installing Enzyme and its dependency ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access