Search⌘ K
Home
Courses
Test-driven Development with React

Testing Higher-Order Components

Explore how to refactor React components by converting Carousel into a stateless core wrapped by a HasIndex higher-order component. Learn to write comprehensive tests for both the core and wrapped components using Jest, ensuring proper integration and state management via props.

We'll cover the following...

Refactoring with higher-order components

With HasIndex, you can now make Carousel a stateless component. Instead of having an initialState and performing setState operations, Carousel will receive slideIndex as a prop and use the slideIndexDecrement and slideIndexIncrement props to update that value.

This change will make the “core” of Carousel simpler (especially as you add new features related to the slide index), but it complicates the shallow testing story. Up to now, Carousel has been a single component that contains all of its own logic. Now it will, in effect, be two components. You’re going to need three types of test to achieve full coverage:

  1. Tests for the component generated by HasIndex
...