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: docusaurus/docs/running-tests.md
+3-91
Original file line number
Diff line number
Diff line change
@@ -85,97 +85,9 @@ This test mounts a component and makes sure that it didn’t throw during render
85
85
86
86
When you encounter bugs caused by changing components, you will gain a deeper insight into which parts of them are worth testing in your application. This might be a good time to introduce more specific tests asserting specific expected output or behavior.
87
87
88
-
### Option 1: Shallow Rendering
88
+
### React Testing Library
89
89
90
-
If you’d like to test components in isolation from the child components they render, we recommend using [`shallow()` rendering API](https://airbnb.io/enzyme/docs/api/shallow.html) from [Enzyme](https://airbnb.io/enzyme/). To install it, run:
As of Enzyme 3, you will need to install Enzyme along with an Adapter corresponding to the version of React you are using. (The examples above use the adapter for React 16.)
103
-
104
-
The adapter will also need to be configured in your [global setup file](#initializing-test-environment):
105
-
106
-
### `src/setupTests.js`
107
-
108
-
```js
109
-
import { configure } from'enzyme';
110
-
importAdapterfrom'enzyme-adapter-react-16';
111
-
112
-
configure({ adapter:newAdapter() });
113
-
```
114
-
115
-
> Note: Keep in mind that if you decide to "eject" before creating `src/setupTests.js`, the resulting `package.json` file won't contain any reference to it. [Read here](#initializing-test-environment) to learn how to add this after ejecting.
116
-
117
-
Now you can write a smoke test with it:
118
-
119
-
```js
120
-
importReactfrom'react';
121
-
import { shallow } from'enzyme';
122
-
importAppfrom'./App';
123
-
124
-
it('renders without crashing', () => {
125
-
shallow(<App />);
126
-
});
127
-
```
128
-
129
-
Unlike the previous smoke test using `ReactDOM.render()`, this test only renders `<App>` and doesn’t go deeper. For example, even if `<App>` itself renders a `<Button>` that throws, this test will pass. Shallow rendering is great for isolated unit tests, but you may still want to create some full rendering tests to ensure the components integrate correctly. Enzyme supports [full rendering with `mount()`](https://airbnb.io/enzyme/docs/api/mount.html), and you can also use it for testing state changes and component lifecycle.
130
-
131
-
You can read the [Enzyme documentation](https://airbnb.io/enzyme/) for more testing techniques. Enzyme documentation uses Chai and Sinon for assertions but you don’t have to use them because Jest provides built-in `expect()` and `jest.fn()` for spies.
132
-
133
-
Here is an example from Enzyme documentation that asserts specific output, rewritten to use Jest matchers:
134
-
135
-
```js
136
-
importReactfrom'react';
137
-
import { shallow } from'enzyme';
138
-
importAppfrom'./App';
139
-
140
-
it('renders welcome message', () => {
141
-
constwrapper=shallow(<App />);
142
-
constwelcome=<h2>Welcome to React</h2>;
143
-
// expect(wrapper.contains(welcome)).toBe(true);
144
-
expect(wrapper.contains(welcome)).toEqual(true);
145
-
});
146
-
```
147
-
148
-
All Jest matchers are [extensively documented here](https://jestjs.io/docs/en/expect.html).
149
-
150
-
Nevertheless you can use a third-party assertion library like [Chai](https://www.chaijs.com/) if you want to, as described below.
151
-
152
-
Additionally, you might find [jest-enzyme](https://github.com/blainekasten/enzyme-matchers) helpful to improve your tests with readable matchers. The above `contains` code can be written more concisely with jest-enzyme.
153
-
154
-
```js
155
-
expect(wrapper).toContainReact(welcome);
156
-
```
157
-
158
-
To enable this, install `jest-enzyme`:
159
-
160
-
```sh
161
-
npm install --save jest-enzyme
162
-
```
163
-
164
-
Alternatively you may use `yarn`:
165
-
166
-
```sh
167
-
yarn add jest-enzyme
168
-
```
169
-
170
-
Import it in [`src/setupTests.js`](#initializing-test-environment) to make its matchers available in every test:
171
-
172
-
```js
173
-
import'jest-enzyme';
174
-
```
175
-
176
-
### Option 2: React Testing Library
177
-
178
-
As an alternative or companion to `enzyme`, you may consider using `react-testing-library`. [`react-testing-library`](https://github.com/testing-library/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/testing-library/jest-dom) for improved assertions.
90
+
If you’d like to test components in isolation from the child components they render, we recommend using `react-testing-library`. [`react-testing-library`](https://github.com/testing-library/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/testing-library/jest-dom) for improved assertions.
179
91
180
92
To install `react-testing-library` and `jest-dom`, you can run:
181
93
@@ -189,7 +101,7 @@ Alternatively you may use `yarn`:
0 commit comments