Gain insights into Test-driven Development with React. Learn unit and integration testing using Jest and Enzyme, and explore tools like ESlint, Prettier, Babel, Webpack, and Travis CI.

react.tar.gz

intro

intro-copy

ch3-something

generic

ch3-1

ch3-2

ch4-1

ch2-1

ch2-2

ch2-3

ch5-copy

intro-copy-wmhr0i

ch3-1-copy

ch4-1-copy

ch4-1-copy-2

generic-copy

ch4-copy

This course is a deep dive into testing in React. You will learn unit testing and integration testing using tools such as Jest and Enzyme. You will also learn about other tools such as ESlint, Prettier, Babel, Webpack, and Travis CI that add convenience for coding and testing.

Test-driven Development with React

## 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` (which you already have)
2. Tests for the core `Carousel` component
3. Tests to ensure that the core and the HOC are properly wired together

The following are the steps to refactor with higher-order components:

* Start by modifying `Carousel.js` so that it exports both the core `Carousel` component and, as the default export, a `HasIndex`-wrapped version:


# 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` (which you already have)
2. Tests for the core `Carousel` component
3. Tests to ensure that the core and the HOC are properly wired together

The following are the steps to refactor with higher-order components:

* Start by modifying `Carousel.js` so that it exports both the core `Carousel` component and, as the default export, a `HasIndex`-wrapped version:


Learn how to test the higher-order components and the core component that the higher-order component is based on.

Testing Higher-Order Components

Before We Begin

Test-Driven Development with Jest

Integrated Tooling with VS Code

Testing React with Enzyme

Styling in JavaScript with Styled-Components

Refactoring with Higher-Order Components

Continuous Integration and Collaboration

Conclusion

Testing Higher-Order Components

Refactoring with higher-order components