You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: template/README.md
+42
Original file line number
Diff line number
Diff line change
@@ -1428,6 +1428,48 @@ Import it in [`src/setupTests.js`](#initializing-test-environment) to make its m
1428
1428
import'jest-enzyme';
1429
1429
```
1430
1430
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
+
importReactfrom'react';
1462
+
import { render } from'react-testing-library';
1463
+
importAppfrom'./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
+
1431
1473
### Using Third Party Assertion Libraries
1432
1474
1433
1475
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