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

# Stacking higher-order components

In React, a set of props can flow from one wrapper component to another, down a practically limitless chain, receiving modifications from each component. This creates infinite possibilities for combining HOCs. Extracting small pieces of functionality into HOCs, instead of allowing components to grow in complexity, is an important skill for keeping a React codebase manageable.

In this section, you’ll add a new feature to `Carousel`. It’s the ability to auto-advance the `slideIndex` on `Carousel` with a timer. All of the timer logic will be encapsulated in a new HOC.

## Working with timers

Let’s create a new HOC called `AutoAdvances`. It’ll be designed to work inside of a `HasIndex`, calling the increment function it receives after a certain time interval. The interval will be specified by a prop with a default value of 10 seconds. The HOC should take two arguments, specifying which prop it should increment and which it should use to compute the upper bound for the increment function. The internal timer will reset every time the target prop (e.g., `slideIndex`) changes so that the carousel doesn’t auto-advance immediately after the user switches slides using the “Prev” or “Next” buttons.

* Start by creating a dummy implementation:

```
  // src/AutoAdvances.js
  import React from 'react';

  export default (Component, propName, upperBoundPropName) =>
    class ComponentWithAutoAdvance extends React.PureComponent {
      static displayName = `AutoAdvances(${Component.displayName ||
      Component.name})`;

      render() {
        return <Component {...this.props} />;
      }
    };
```

* Then formalize the HOC’s requirements as a suite of tests. For the sake of brevity, all of the tests are presented at once below. If you’re trying to practice TDD, you should add one test at a time, then modify the implementation to make that test pass before adding the next one:



Learn how to work with multiple higher-order components, timers, and how to test them.

Multiple 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

Multiple Higher-Order Components

Stacking higher-order components

Working with timers