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

# Taking snapshots using Jest

When you think of testing, you probably picture a list of assertions about your code, a sort of checklist of its functionality. Up to this point, all of the tests in this course have fit that description. But sometimes a picture is worth a thousand words. Or in this case, a piece of content generated by your code can be worth a thousand assertions. Seeing a diff of that content can bring your attention to problems you might never have thought to write an assertion for.

For our purposes, the content we’re interested in snapshotting is the DOM generated by `CarouselSlide`, along with the styles generated by styled-components. 
* To do that, you’ll need to install one more package, `enzyme-to-json`.

  ~~~sh
  $ npm install --save-dev enzyme-to-json@3.3.5
  + enzyme-to-json@3.3.5
  ~~~

  `enzyme-to-json` takes the trees from Enzyme wrappers and converts them to the JSON format used for Jest snapshot testing, a process known as serialization.
*  To tell Jest to use the package, declare it in the Jest config:


//jest.config.js
module.exports = {
  setupTestFrameworkScriptFile: './src/tests/jestSetup.js',
  snapshotSerializers: ['enzyme-to-json/serializer'],
}

// src/tests/CarouselSlide.test.js
...
describe('CarouselSlide', () => {
  ...
  it('renders correctly', () => {
    wrapper.setProps({
      description: 'Description',
      attribution: 'Attribution',
    });
    expect(wrapper).toMatchSnapshot();
  });
});
...

~~~shell
$ npx jest
 PASS  src/tests/CarouselButton.test.js
 PASS  src/tests/Carousel.test.js
 PASS  src/tests/CarouselSlide.test.js
 › 1 snapshot written.

Snapshot Summary
 › 1 snapshot written from 1 test suite.
~~~

Jest created a new directory, `src/tests/__snapshots__`, with one file:

~~~
// src/tests/__snapshots__/CarouselSlide.test.js.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`CarouselSlide renders correctly 1`] = `
<figure>
  <CarouselSlide__DefaultImg
    imgHeight={500}
    src="https://example.com/default.jpg"
  />
  <figcaption>
    <strong>
      Description
    </strong>

    Attribution
  </figcaption>
</figure>
`;
~~~

This provides a nice, clear picture of what `CarouselSlide` shallowly renders.
*  Try taking a snapshot of the `Img` component, too:

~~~
// src/tests/CarouselSlide.test.js
...
describe('Img', () => {
  ...
  // START_HIGHLIGHT
  it('renders correctly', () => {
    expect(mounted.find('img')).toMatchSnapshot();
  });
  // END_HIGHLIGHT
});
~~~

* Run the test and you’ll see another snapshot in the same file:

~~~
// src/tests/__snapshots__/CarouselSlide.test.js.snap
...
exports[`Img renders correctly 1`] = `
.c0 {
  object-fit: cover;
  width: 100%;
  height: 500px;
}

<img
  className="c0"
  src="https://example.com/default.jpg"
/>
`;
~~~

Beautiful. Now you can see that the generated markup is just as expected, and that the `<img>` element receives a `className` that confers the expected styles. As is always the case with styled-components, the particular class name, `c0` here is arbitrary.

These two snapshots are an excellent substitute for several of the existing tests about `CarouselSlide`’s markup. Removing those rather rigid tests will help make it easier to change the component’s markup in the future. Instead of making changes to multiple failing tests, you’ll only have to confirm that the new snapshots reflect your intent.

Pruning the tests that are redundant with the snapshots yields the final `CarouselSlide.test.js` for this chapter as given in the code widget at the end of this lesson in file `src/tests/CarouselSlide.test.js`.

<embed file="code/ch4/src/tests/CarouselSlide.test.js" language="jsx" />

From now on, every time you run your tests, Jest will generate new snapshots to compare to the old ones. If the two are identical, the `toMatchSnapshot()` assertion passes. But what happens if they’re different? Try changing, the `object-fit` style rule from `cover` to `contain`:

~~~shell
$ npx jest
 PASS  src/tests/CarouselButton.test.js
 PASS  src/tests/Carousel.test.js
 FAIL  src/tests/CarouselSlide.test.js
  ● Img › renders correctly

    expect(value).toMatchSnapshot()

    Received value does not match stored snapshot "Img renders correctly 1".

    - Snapshot
    + Received

    @@ -1,8 +1,8 @@
      .c0 {
        width: 100%;
    -   object-fit: cover;
    +   object-fit: contain;
      }

      <img
        className="c0"
        src="https://example.com/default.jpg"

      43 |
      44 |   it('renders correctly', () => {
    > 45 |     expect(mounted.find('img')).toMatchSnapshot();
         |                                 ^
      46 |   });
      47 |
      48 |   it('uses imgHeight as the height style property', () => {

      at Object.toMatchSnapshot (src/tests/CarouselSlide.test.js:45:33)

 › 1 snapshot failed.
Snapshot Summary
 › 1 snapshot failed from 1 test suite. Inspect your code changes or run
 `npx jest -u` to update them.
~~~

When a `toMatchSnapshot()` assertion fails, Jest treats that as a test failure and shows you a diff of the snapshot. The snapshot on disk remains unchanged. To confirm that your change is intentional, you run the tests again with the `-u` (short for `--updateSnapshot`) flag, causing all snapshots to be overwritten.

>**Snapshot testing in Wallaby.js**<p>Wallaby offers excellent support for snapshot testing, including the ability to view snapshot diffs side-by-side in your editor and update snapshots individually. For details, check the [official docs.](https://wallabyjs.com/docs/integration/jest.html#snapshot-testing)</p>

This snapshot process may feel strange at first. Unit tests are normally automated. Snapshot testing, by contrast, requires human intervention: on its own, the machine can’t determine whether the test should pass or not. That brings human error into the equation. In practice, this downside is mitigated by the fact that snapshots are version controlled. If a pull request contains an unwanted change that’s reflected in a snapshot carelessly updated by the author, everyone reviewing that pull request will see the snapshot diff and have a chance to raise a red flag.

Speaking of version control, it’s time to make your final commit for this chapter:

~~~shell
:white_check_mark: Add snapshot tests for CarouselSlide
~~~

This concludes our tour of styled-components and testing. We only got around to styling one element, the `<img>`, so there’s lots left to do. As an exercise for this chapter, try adding some finishing touches to the carousel. Play around with different styles for the caption, the buttons, and the overall layout. When you feel satisfied with your work, be sure to add a snapshot test for each element, then breathe a sigh of relief that your styles are safe from regressions.

> Below is the complete code for this chapter. All the files have been set up for you. You can run the `npm test` command to run the tests. You can also run the webpack by running the `npm run build` command. 




Learn how you can take snapshots using Jest to compare and test your React 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

Jest Snapshot

Taking snapshots using Jest