Commit ea7b3741 authored by Kent C. Dodds's avatar Kent C. Dodds Committed by Joe Haddad
Browse files

add react-testing-library documentation/examples (#4679)

* add react-testing-library documentation/examples

* make react-testing-library a heading

* fix typo
parent 8de0412c
8 merge requests!4749replace workspaceRoot with workspaceFolder,!4933Facebook next,!12191Lim.Pisey.168:/Identified - We are currently investigating reports of missing build logs. The issue has been identified and a resolution is in progress. We will provide a further update when available.Mar 21, 09:02 UTC,!12853brikk,!5023Master,!4886Proper folder structure,!5717Automatically extract project file structure from build bundle file,!4950Master
Showing with 42 additions and 0 deletions
+42 -0
...@@ -1428,6 +1428,48 @@ Import it in [`src/setupTests.js`](#initializing-test-environment) to make its m ...@@ -1428,6 +1428,48 @@ Import it in [`src/setupTests.js`](#initializing-test-environment) to make its m
import 'jest-enzyme'; 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 `<App />` 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(<App />);
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 ### 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). 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).
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment