React for Real

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 ...