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

# Creating reusable higher-order component 

At the bottom of this lesson, we have the `test-driven-carousel` [project from the previous chapter](https://www.educative.io/courses/test-driven-react-development/jest-snapshot), take a look at the `Carousel` component. In addition to rendering a somewhat complex DOM tree, it also has one piece of state and two event handlers that manipulate that state. Let’s try building an HOC that encapsulates that logic.

* Well-implemented HOCs tend to be highly reusable, and this one will be no exception. It’ll manage the state for any component with an “index” prop, meaning a number that can go from 0 up to some limit. Call it `HasIndex`. Start with a minimal dummy implementation that you can run tests against:

  ~~~
  // src/HasIndex.js
  import React from 'react';

  export default (Component, indexPropName) =>
    class ComponentWithIndex extends 
  React.PureComponent {
      static displayName =
        `HasIndex(${Component.displayName || Component.name})`;

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

* To replace the `slideIndex` logic in `Carousel`, we need `HasIndex` to provide three props to the wrapped component: the index itself (with the given `indexPropName`), an increment function, and a decrement function. To support wrap-around, the increment and decrement functions should accept an upper bound argument. Write a test suite with those requirements:

  ~~~
  // src/tests/HasIndex.test.js
  import React from 'react';
  import { shallow } from 'enzyme';
  import HasIndex from '../HasIndex';

  describe('HasIndex()', () => {
    const MockComponent = () => null;
    MockComponent.displayName = 'MockComponent';
    const MockComponentWithIndex = HasIndex(MockComponent, 'index');

    it('has the expected displayName', () => {
      expect(MockComponentWithIndex.displayName).toBe(
        'HasIndex(MockComponent)'
      );
    });

    let wrapper;
    beforeEach(() => {
      wrapper = shallow(<MockComponentWithIndex />);
    });

    it('has an initial `index` state of 0', () => {
      expect(wrapper.state('index')).toBe(0);
    });

    it('passes the `index` state down as the `index` prop', () => {
      expect(wrapper.prop('index')).toBe(0);
      wrapper.setState({ index: 1 });
      expect(wrapper.prop('index')).toBe(1);
    });

    it('has an `index` state of 2 on decrement from 3', () => {
      wrapper.setState({ index: 3 });
      wrapper.prop('indexDecrement')();
      expect(wrapper.state('index')).toBe(2);
    });

    it('has an `index` state of 1 on increment', () => {
      wrapper.prop('indexIncrement')();
      expect(wrapper.state('index')).toBe(1);
    });

    it('has the max `index` state on decrement from 0', () => {
      wrapper.setState({ index: 0 });
      wrapper.prop('indexDecrement')(3);
      expect(wrapper.state('index')).toBe(2);
    });

    it('has the min `index` state on increment from the max', () => {
      wrapper.setState({ index: 2 });
      wrapper.prop('indexIncrement')(3);
      expect(wrapper.state('index')).toBe(0);
    });
  });
  ~~~

* Then try modifying the implementation to meet those requirements. You should end up with something like this:


# Creating reusable higher-order component 

At the bottom of this lesson, we have the `test-driven-carousel` [project from the previous chapter](https://www.educative.io/courses/test-driven-react-development/jest-snapshot), take a look at the `Carousel` component. In addition to rendering a somewhat complex DOM tree, it also has one piece of state and two event handlers that manipulate that state. Let’s try building an HOC that encapsulates that logic.

* Well-implemented HOCs tend to be highly reusable, and this one will be no exception. It’ll manage the state for any component with an “index” prop, meaning a number that can go from 0 up to some limit. Call it `HasIndex`. Start with a minimal dummy implementation that you can run tests against:

  ~~~
  // src/HasIndex.js
  import React from 'react';

  export default (Component, indexPropName) =>
    class ComponentWithIndex extends 
  React.PureComponent {
      static displayName =
        `HasIndex(＄{Component.displayName || Component.name})`;

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

* To replace the `slideIndex` logic in `Carousel`, we need `HasIndex` to provide three props to the wrapped component: the index itself (with the given `indexPropName`), an increment function, and a decrement function. To support wrap-around, the increment and decrement functions should accept an upper bound argument. Write a test suite with those requirements:

  ~~~
  // src/tests/HasIndex.test.js
  import React from 'react';
  import { shallow } from 'enzyme';
  import HasIndex from '../HasIndex';

  describe('HasIndex()', () => {
    const MockComponent = () => null;
    MockComponent.displayName = 'MockComponent';
    const MockComponentWithIndex = HasIndex(MockComponent, 'index');

    it('has the expected displayName', () => {
      expect(MockComponentWithIndex.displayName).toBe(
        'HasIndex(MockComponent)'
      );
    });

    let wrapper;
    beforeEach(() => {
      wrapper = shallow(<MockComponentWithIndex />);
    });

    it('has an initial `index` state of 0', () => {
      expect(wrapper.state('index')).toBe(0);
    });

    it('passes the `index` state down as the `index` prop', () => {
      expect(wrapper.prop('index')).toBe(0);
      wrapper.setState({ index: 1 });
      expect(wrapper.prop('index')).toBe(1);
    });

    it('has an `index` state of 2 on decrement from 3', () => {
      wrapper.setState({ index: 3 });
      wrapper.prop('indexDecrement')();
      expect(wrapper.state('index')).toBe(2);
    });

    it('has an `index` state of 1 on increment', () => {
      wrapper.prop('indexIncrement')();
      expect(wrapper.state('index')).toBe(1);
    });

    it('has the max `index` state on decrement from 0', () => {
      wrapper.setState({ index: 0 });
      wrapper.prop('indexDecrement')(3);
      expect(wrapper.state('index')).toBe(2);
    });

    it('has the min `index` state on increment from the max', () => {
      wrapper.setState({ index: 2 });
      wrapper.prop('indexIncrement')(3);
      expect(wrapper.state('index')).toBe(0);
    });
  });
  ~~~

* Then try modifying the implementation to meet those requirements. You should end up with something like this:


Learn to refactor our code from the previous chapter to make a higher-order component in this lesson.

Creating Higher-Order Component

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

Creating Higher-Order Component

Creating reusable higher-order component