Skip to content

Commit 3a4414c

Browse files
gnapseTimer
authored andcommitted
add react-testing-library documentation/examples (#4679) (#5290)
* add react-testing-library documentation/examples * make react-testing-library a heading * fix typo
1 parent 0473b7d commit 3a4414c

File tree

1 file changed

+42
-0
lines changed

1 file changed

+42
-0
lines changed

packages/react-scripts/template/README.md

+42
Original file line numberDiff line numberDiff line change
@@ -1458,6 +1458,48 @@ Import it in [`src/setupTests.js`](#initializing-test-environment) to make its m
14581458
import 'jest-enzyme';
14591459
```
14601460

1461+
#### Use `react-testing-library`
1462+
1463+
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.
1464+
1465+
To install `react-testing-library` and `jest-dom`, you can run:
1466+
1467+
```sh
1468+
npm install --save react-testing-library jest-dom
1469+
```
1470+
1471+
Alternatively you may use `yarn`:
1472+
1473+
```sh
1474+
yarn add react-testing-library jest-dom
1475+
```
1476+
1477+
Similar to `enzyme` you can create a `src/setupTests.js` file to avoid boilerplate in your test files:
1478+
1479+
```js
1480+
// react-testing-library renders your components to document.body,
1481+
// this will ensure they're removed after each test.
1482+
import 'react-testing-library/cleanup-after-each';
1483+
1484+
// this adds jest-dom's custom assertions
1485+
import 'jest-dom/extend-expect';
1486+
```
1487+
1488+
Here's an example of using `react-testing-library` and `jest-dom` for testing that the `<App />` component renders "Welcome to React".
1489+
1490+
```js
1491+
import React from 'react';
1492+
import { render } from 'react-testing-library';
1493+
import App from './App';
1494+
1495+
it('renders welcome message', () => {
1496+
const { getByText } = render(<App />);
1497+
expect(getByText('Welcome to React')).toBeInTheDOM();
1498+
});
1499+
```
1500+
1501+
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).
1502+
14611503
### Using Third Party Assertion Libraries
14621504

14631505
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).

0 commit comments

Comments
 (0)