diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 479d632a5f0..388b73d8d36 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1428,6 +1428,48 @@ Import it in [`src/setupTests.js`](#initializing-test-environment) to make its m import 'jest-enzyme'; ``` +#### Use `react-testing-library` + +As an alternative or companion to `enzyme`, you may consider using `react-testing-library`. [`react-testing-library`](https://github.com/kentcdodds/react-testing-library) is a library for testing React components in a way that resembles the way the components are used by end users. It is well suited for unit, integration, and end-to-end testing of React components and applications. It works more directly with DOM nodes, and therefore it's recommended to use with [`jest-dom`](https://github.com/gnapse/jest-dom) for improved assertions. + +To install `react-testing-library` and `jest-dom`, you can run: + +```sh +npm install --save react-testing-library jest-dom +``` + +Alternatively you may use `yarn`: + +```sh +yarn add react-testing-library jest-dom +``` + +Similar to `enzyme` you can create a `src/setupTests.js` file to avoid boilerplate in your test files: + +```js +// react-testing-library renders your components to document.body, +// this will ensure they're removed after each test. +import 'react-testing-library/cleanup-after-each'; + +// this adds jest-dom's custom assertions +import 'jest-dom/extend-expect'; +``` + +Here's an example of using `react-testing-library` and `jest-dom` for testing that the `` component renders "Welcome to React". + +```js +import React from 'react'; +import { render } from 'react-testing-library'; +import App from './App'; + +it('renders welcome message', () => { + const { getByText } = render(); + expect(getByText('Welcome to React')).toBeInTheDOM(); +}); +``` + +Learn more about the utilities provided by `react-testing-library` to facilitate testing asynchronous interactions as well as selecting form elements from [the `react-testing-library` documentation](https://github.com/kentcdodds/react-testing-library) and [examples](https://codesandbox.io/s/github/kentcdodds/react-testing-library-examples). + ### Using Third Party Assertion Libraries We recommend that you use `expect()` for assertions and `jest.fn()` for spies. If you are having issues with them please [file those against Jest](https://github.com/facebook/jest/issues/new), and we’ll fix them. We intend to keep making them better for React, supporting, for example, [pretty-printing React elements as JSX](https://github.com/facebook/jest/pull/1566).