7. Media Library - Testing Revisited: react-testing-library

Code 

https://github.com/fullsapps/media-library/tree/6%267.LazyLoadingTestingRedux

Choices 

If you are joining this blog series on this post you should review the previous post. In fact, you likely will need to review the whole series for any of these posts to make sense.

In post 4 (Testing) we established a testing strategy for our app that leveraged Enzyme. In post 6 (Lazy Loading) we decided to upgrade to React 16.7 (alpha) to take advantage of (and to experiment with) some of the new features of React. This broken out tests, per https://github.com/airbnb/enzyme/issues/1917. As a result, we decided to move away from Enzyme and move to react-testing-library.

Background on react-testing-library

react-testing-library was created because the author (Kent C. Dodds) was frustrated with Enzyme and believed it encouraged too much focus on implementation details. As a result, react-testing-library focuses on testing the DOM (that gets rendered from components) and not components directly.

react-testing-library is not a test runner, so we will continue to use Jest (which was included when we bootstrapped the app using Create React App, and was part of our previous Enzyme strategy).  Also, I will use jest-dom to simplify assertions (similar to how I used jest-enzyme previously).

Walk Through

I have added react-testing-library to our app (along with jest-dom) per the instructions in the Create React App User Guide (https://facebook.github.io/create-react-app/docs/running-tests#option-2-react-testing-library) also outlined in the react-testing-library docs (https://github.com/kentcdodds/react-testing-library). For reference, the jest-dom docs can be found here: https://github.com/gnapse/jest-dom. I also uninstalled our previous testing bits: enzyme, enzyme-adapter-react-16, react-test-renderer and jest-enzyme.

To use react-testing-library we can render our component and use the functions returned (in this case I will use getByText) to evaluate the DOM.

Updated App.test.jsx.

import React from 'react';
import { render } from 'react-testing-library';
import App from './App';

describe('<App />', () => {
  it('renders', () => {
    const { getByText } = render(<App />);
    expect(getByText('Login')).toBeInTheDocument();
  });
});

The test passes because the DOM rendered in our test looks like this:

    <body>
      <div>
        <div>
          Login
        </div>
      </div>
    </body>

I will leave at that for now. As our app progresses we will write more tests and get to know react-testing-library better.

Next

We will finally setup Navigation next.

Comments

  1. Great information.develop Lucky me I came across your blog by chance (stumbleupon). I've bookmarked it for later!

    ReplyDelete
  2. I really enjoyed reading your blog. It was very well written and easy to understand. Unlike other blogs that I have read which are actually not very good. Thank you so much!
    Hire GraphQL Developer India

    ReplyDelete

Post a Comment

Popular posts from this blog

Calling a REST API from AWS Lambda (The Easy Way)

Calling AWS AppSync, or any GraphQL API, from AWS Lambda, part 1

32. Media Library - Uploading Images, Part 1