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: packages/react-scripts/template/README.md
+42
Original file line number
Diff line number
Diff line change
@@ -1458,6 +1458,48 @@ Import it in [`src/setupTests.js`](#initializing-test-environment) to make its m
1458
1458
import'jest-enzyme';
1459
1459
```
1460
1460
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
+
importReactfrom'react';
1492
+
import { render } from'react-testing-library';
1493
+
importAppfrom'./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
+
1461
1503
### Using Third Party Assertion Libraries
1462
1504
1463
1505
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