Skip to content

Commit bee84d2

Browse files
Kent C. DoddsTimer
Kent C. Dodds
authored andcommitted
add react-testing-library documentation/examples (facebook#4679)
* add react-testing-library documentation/examples * make react-testing-library a heading * fix typo
1 parent fdff9d4 commit bee84d2

File tree

1 file changed

+42
-0
lines changed

1 file changed

+42
-0
lines changed

Diff for: template/README.md

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

1431+
#### Use `react-testing-library`
1432+
1433+
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.
1434+
1435+
To install `react-testing-library` and `jest-dom`, you can run:
1436+
1437+
```sh
1438+
npm install --save react-testing-library jest-dom
1439+
```
1440+
1441+
Alternatively you may use `yarn`:
1442+
1443+
```sh
1444+
yarn add react-testing-library jest-dom
1445+
```
1446+
1447+
Similar to `enzyme` you can create a `src/setupTests.js` file to avoid boilerplate in your test files:
1448+
1449+
```js
1450+
// react-testing-library renders your components to document.body,
1451+
// this will ensure they're removed after each test.
1452+
import 'react-testing-library/cleanup-after-each';
1453+
1454+
// this adds jest-dom's custom assertions
1455+
import 'jest-dom/extend-expect';
1456+
```
1457+
1458+
Here's an example of using `react-testing-library` and `jest-dom` for testing that the `<App />` component renders "Welcome to React".
1459+
1460+
```js
1461+
import React from 'react';
1462+
import { render } from 'react-testing-library';
1463+
import App from './App';
1464+
1465+
it('renders welcome message', () => {
1466+
const { getByText } = render(<App />);
1467+
expect(getByText('Welcome to React')).toBeInTheDOM();
1468+
});
1469+
```
1470+
1471+
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).
1472+
14311473
### Using Third Party Assertion Libraries
14321474

14331475
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)