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



As mentioned earlier, our project for the rest of the course is building a carousel. A carousel is a widget that shows a series of images to the user one at a time. The user has the ability to move between adjacent images in the series. The carousel can also auto-advance, like a slideshow. By the end of the course, our carousel will look like this:





Since this is fairly complex, we’re going to implement it as a primary component called `Carousel` with two secondary components:

1. `CarouselSlide`, an image shown in the carousel
1. `CarouselButton`, a button that lets the user control the slides

Let’s start by writing some tests for the simplest component: `CarouselButton` is just going to render a `<button>`. Why componentize it at all? Because we’re going to add styling to that `<button>` [in the next chapter](https://www.educative.io/courses/test-driven-react-development/introduction-to-css-in-js). We’ll make assertions about the component using a library called Enzyme.

# Getting started with Enzyme

Airbnb’s Enzyme has become the most popular library for testing React components. Enzyme is especially good at rendering a single component in isolation, a technique known as “shallow rendering,” and letting you see how changes in the component’s props and state cause its render tree to change. With shallow rendering, other components in the render tree are treated as black boxes. You can see what props they receive, but not their output. We’ll be using shallow rendering for all of the React component tests in this course.

>**Enzyme vs. `react-testing-library`**<p>As this course was written, a solid competitor to Enzyme emerged and gained traction: `react-testing-library`. Whereas Enzyme is a Swiss Army knife for testing React components, `react-testing-library` is focused on a single approach. It renders components to the DOM and makes assertions about that DOM tree.</p><p>Both Enzyme and `react-testing-library` have their pros and cons. This course advocates testing individual components in isolation, which isn’t possible with `react-testing-library`. However, `react-testing-library`’s approach is more conceptually straightforward. Furthermore, Enzyme’s development has lagged somewhat. As of this writing, its shallow rendering mode lacks support for some cutting-edge React features, such as the new context API introduced in React 16.3.</p><p>If you’re starting a new React project, do your research. Take a close look at both Enzyme and `react-testing-library` and decide which is the best fit for you.</p>

* You’ll need to install Enzyme, plus the “adapter” that lets it plug into the version of React you’re using:

  ~~~sh
  $ npm install --save-dev enzyme@3.8.0 enzyme-adapter-react-16@1.7.1
  + enzyme@3.8.0
  + enzyme-adapter-react-16@1.7.1
  ~~~

* Delete the `hello.test.js` file. Then create a quick implementation of `CarouselButton`:

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

  const CarouselButton = () => <button />;

  export default CarouselButton;
  ~~~

  `CarouselButton` is defined as a function that returns an empty `<button>`. Simple as it is, this is a valid React component. Note the use of capitalization. JSX treats `<Uppercase />` as an instance of a component named `Uppercase`, and `<lowercase />` as an instance of a DOM element named `lowercase`.

* Now put this test in place:

  ~~~
  // src/tests/CarouselButton.test.js
  import React from 'react'; // 1
  import { configure, shallow } from 'enzyme'; // 2
  import Adapter from 'enzyme-adapter-react-16';
  import CarouselButton from '../CarouselButton';

  configure({ adapter: new Adapter() });

  describe('CarouselButton', () => {
    it('renders a <button>', () => {
      const wrapper = shallow(<CarouselButton />); // 3
      expect(wrapper.type()).toBe('button');
    });
  });
  ~~~

><ol><li> Even though our code never references <code>React</code> directly, we need to import it in both the component module and the test module because both use JSX expressions, which compile to <code>React.createElement</code> statements.</li></br><li>Enzyme needs us to pass a React version-appropriate adapter to its <code>configure</code> function before we can use it, so we do that at the top of the test file. Later in this chapter, we’ll move that setup code elsewhere to avoid duplicating it across all test files.</li></br><li>Enzyme’s <code>shallow()</code> method returns a shallow wrapper.</li></ol>

If you run Jest, the test output should be all-green. However, savvy React developers will notice that this isn’t a very useful `CarouselButton` implementation yet. There’s no way to put content inside of the `<button />`. So let’s get into full TDD mode after we commit using the gitmoji for a work in progress:

~~~shell
:construction: Starting work on CarouselButton
~~~

> Install Enzyme below and run the tests.

Learn how to Test simple React components with Enzyme using shallow rendering.

Component Testing with Enzyme

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

Component Testing with Enzyme