Skip to content

Commit 601c016

Browse files
gaearongaearon
committed
testing
1 parent d97cdca commit 601c016

File tree

3 files changed

+246
-59
lines changed

3 files changed

+246
-59
lines changed

‎content/blog/2019-02-04-react-v16.8.0.md

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,55 @@ Note that React Hooks don't cover *all* use cases for classes yet but they're [v
4848

4949
Even while Hooks were in alpha, the React community created many interesting [examples](https://codesandbox.io/react-hooks) and [recipes](https://usehooks.com) using Hooks for animations, forms, subscriptions, integrating with other libraries, and so on. We're excited about Hooks because they make code reuse easier, helping you write your components in a simpler way and make great user experiences. We can't wait to see what you'll create next!
5050

51+
## Testing Hooks
52+
53+
We have added a new API called `ReactTestUtils.act()` in this release. It ensures that the behavior in your tests matches what happens in the browser more closely. We recommend to wrap any code rendering and triggering updates to your components into `act()` calls. Testing libraries like [`react-testing-library`](https://github.com/kentcdodds/react-testing-library) can also wrap their APIs with it.
54+
55+
For example, the counter example from [this page](/docs/hooks-effect.html) can be tested like this:
56+
57+
```js{3,20-22,29-31}
58+
import React from 'react';
59+
import ReactDOM from 'react-dom';
60+
import { act } from 'react-dom/test-utils';
61+
import Counter from './Counter';
62+
63+
let container;
64+
65+
beforeEach(() => {
66+
container = document.createElement('div');
67+
document.body.appendChild(container);
68+
});
69+
70+
afterEach(() => {
71+
document.body.removeChild(container);
72+
container = null;
73+
});
74+
75+
it('can render and update a counter', () => {
76+
// Test first render and componentDidMount
77+
act(() => {
78+
ReactDOM.render(<Counter />, container);
79+
});
80+
const button = container.querySelector('button');
81+
const label = container.querySelector('p');
82+
expect(label.textContent).toBe('You clicked 0 times');
83+
expect(document.title).toBe('You clicked 0 times');
84+
85+
// Test second render and componentDidUpdate
86+
act(() => {
87+
button.dispatchEvent(new MouseEvent('click', {bubbles: true}));
88+
});
89+
expect(label.textContent).toBe('You clicked 1 times');
90+
expect(document.title).toBe('You clicked 1 times');
91+
});
92+
```
93+
94+
The calls to `act()` will also flush the effects inside of them.
95+
96+
If you need to test a custom Hook, you can do so by creating a component in your test, and using your Hook from it. Then you can test the component you wrote.
97+
98+
To reduce the boilerplate, we recommend using [`react-testing-library`](https://git.io/react-testing-library) which is designed to encourage writing tests that use your components as the end users do.
99+
51100
## Thanks
52101

53102
We'd like to thank everybody who commented on the [Hooks RFC](https://github.com/reactjs/rfcs/pull/68) for sharing their feedback. We've read all of your comments and made some adjustments to the final API based on them.

‎content/docs/addons-test-utils.md

Lines changed: 135 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,11 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm
1919

2020
> Note:
2121
>
22-
> Airbnb has released a testing utility called Enzyme, which makes it easy to assert, manipulate, and traverse your React Components' output. If you're deciding on a unit testing utility to use together with Jest, or any other test runner, it's worth checking out: [http://airbnb.io/enzyme/](http://airbnb.io/enzyme/)
22+
> We recommend using [`react-testing-library`](https://git.io/react-testing-library) which is designed to enable and encourage writing tests that use your components as the end users do.
2323
>
24-
> Alternatively, there is another testing utility called react-testing-library designed to enable and encourage writing tests that use your components as the end users use them. It also works with any test runner: [https://git.io/react-testing-library](https://git.io/react-testing-library)
24+
> Alternatively, Airbnb has released a testing utility called [Enzyme](http://airbnb.io/enzyme/), which makes it easy to assert, manipulate, and traverse your React Components' output.
2525
26-
- [`Simulate`](#simulate)
27-
- [`renderIntoDocument()`](#renderintodocument)
26+
- [`act()`](#act)
2827
- [`mockComponent()`](#mockcomponent)
2928
- [`isElement()`](#iselement)
3029
- [`isElementOfType()`](#iselementoftype)
@@ -38,68 +37,88 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm
3837
- [`findRenderedDOMComponentWithTag()`](#findrendereddomcomponentwithtag)
3938
- [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype)
4039
- [`findRenderedComponentWithType()`](#findrenderedcomponentwithtype)
40+
- [`renderIntoDocument()`](#renderintodocument)
41+
- [`Simulate`](#simulate)
4142

4243
## Reference
4344

44-
## Shallow Rendering
45-
46-
When writing unit tests for React, shallow rendering can be helpful. Shallow rendering lets you render a component "one level deep" and assert facts about what its render method returns, without worrying about the behavior of child components, which are not instantiated or rendered. This does not require a DOM.
47-
48-
> Note:
49-
>
50-
> The shallow renderer has moved to `react-test-renderer/shallow`.<br>
51-
> [Learn more about shallow rendering on its reference page.](/docs/shallow-renderer.html)
52-
53-
## Other Utilities
54-
55-
### `Simulate`
56-
57-
```javascript
58-
Simulate.{eventName}(
59-
element,
60-
[eventData]
61-
)
45+
### `act()`
46+
47+
To prepare a component for assertions, wrap the code rendering it and performing updates inside an `act()` call. This makes your test run closer to how React works in the browser.
48+
49+
For example, let's say we have this `Counter` component:
50+
51+
```js
52+
class App extends React.Component {
53+
constructor(props) {
54+
super(props);
55+
this.state = {count: 0};
56+
this.handleClick = this.handleClick.bind(this);
57+
}
58+
componentDidMount() {
59+
document.title = `You clicked ${this.state.count} times`;
60+
}
61+
componentDidUpdate() {
62+
document.title = `You clicked ${this.state.count} times`;
63+
}
64+
handleClick() {
65+
this.setState(state => ({
66+
count: state.count + 1,
67+
}));
68+
}
69+
render() {
70+
return (
71+
<div>
72+
<p>You clicked {this.state.count} times</p>
73+
<button onClick={this.handleClick}>
74+
Click me
75+
</button>
76+
</div>
77+
);
78+
}
79+
}
6280
```
6381

64-
Simulate an event dispatch on a DOM node with optional `eventData` event data.
65-
66-
`Simulate` has a method for [every event that React understands](/docs/events.html#supported-events).
67-
68-
**Clicking an element**
69-
70-
```javascript
71-
// <button ref={(node) => this.button = node}>...</button>
72-
const node = this.button;
73-
ReactTestUtils.Simulate.click(node);
82+
Here is how we can test it:
83+
84+
```js{3,20-22,29-31}
85+
import React from 'react';
86+
import ReactDOM from 'react-dom';
87+
import { act } from 'react-dom/test-utils';
88+
import Counter from './Counter';
89+
90+
let container;
91+
92+
beforeEach(() => {
93+
container = document.createElement('div');
94+
document.body.appendChild(container);
95+
});
96+
97+
afterEach(() => {
98+
document.body.removeChild(container);
99+
container = null;
100+
});
101+
102+
it('can render and update a counter', () => {
103+
// Test first render and componentDidMount
104+
act(() => {
105+
ReactDOM.render(<Counter />, container);
106+
});
107+
const button = container.querySelector('button');
108+
const label = container.querySelector('p');
109+
expect(label.textContent).toBe('You clicked 0 times');
110+
expect(document.title).toBe('You clicked 0 times');
111+
112+
// Test second render and componentDidUpdate
113+
act(() => {
114+
button.dispatchEvent(new MouseEvent('click', {bubbles: true}));
115+
});
116+
expect(label.textContent).toBe('You clicked 1 times');
117+
expect(document.title).toBe('You clicked 1 times');
118+
});
74119
```
75120

76-
**Changing the value of an input field and then pressing ENTER.**
77-
78-
```javascript
79-
// <input ref={(node) => this.textInput = node} />
80-
const node = this.textInput;
81-
node.value = 'giraffe';
82-
ReactTestUtils.Simulate.change(node);
83-
ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13});
84-
```
85-
86-
> Note
87-
>
88-
> You will have to provide any event property that you're using in your component (e.g. keyCode, which, etc...) as React is not creating any of these for you.
89-
90-
* * *
91-
92-
### `renderIntoDocument()`
93-
94-
```javascript
95-
renderIntoDocument(element)
96-
```
97-
98-
Render a React element into a detached DOM node in the document. **This function requires a DOM.**
99-
100-
> Note:
101-
>
102-
> You will need to have `window`, `window.document` and `window.document.createElement` globally available **before** you import `React`. Otherwise React will think it can't access the DOM and methods like `setState` won't work.
121+
Don't forget that dispatching DOM events only works when the DOM container is added to the `document`. You can use a helper like [`react-testing-library`](https://github.com/kentcdodds/react-testing-library) to reduce the boilerplate code.
103122

104123
* * *
105124

@@ -265,5 +284,62 @@ findRenderedComponentWithType(
265284

266285
Same as [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype) but expects there to be one result and returns that one result, or throws exception if there is any other number of matches besides one.
267286

287+
***
288+
289+
### `renderIntoDocument()`
290+
291+
```javascript
292+
renderIntoDocument(element)
293+
```
294+
295+
Render a React element into a detached DOM node in the document. **This function requires a DOM.** It is effectively equivalent to:
296+
297+
```js
298+
const domContainer = document.createElement('div');
299+
ReactDOM.render(element, domContainer);
300+
```
301+
302+
> Note:
303+
>
304+
> You will need to have `window`, `window.document` and `window.document.createElement` globally available **before** you import `React`. Otherwise React will think it can't access the DOM and methods like `setState` won't work.
305+
268306
* * *
269307

308+
## Other Utilities
309+
310+
### `Simulate`
311+
312+
```javascript
313+
Simulate.{eventName}(
314+
element,
315+
[eventData]
316+
)
317+
```
318+
319+
Simulate an event dispatch on a DOM node with optional `eventData` event data.
320+
321+
`Simulate` has a method for [every event that React understands](/docs/events.html#supported-events).
322+
323+
**Clicking an element**
324+
325+
```javascript
326+
// <button ref={(node) => this.button = node}>...</button>
327+
const node = this.button;
328+
ReactTestUtils.Simulate.click(node);
329+
```
330+
331+
**Changing the value of an input field and then pressing ENTER.**
332+
333+
```javascript
334+
// <input ref={(node) => this.textInput = node} />
335+
const node = this.textInput;
336+
node.value = 'giraffe';
337+
ReactTestUtils.Simulate.change(node);
338+
ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13});
339+
```
340+
341+
> Note
342+
>
343+
> You will have to provide any event property that you're using in your component (e.g. keyCode, which, etc...) as React is not creating any of these for you.
344+
345+
* * *

‎content/docs/hooks-faq.md

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,8 +113,70 @@ Importantly, custom Hooks give you the power to constrain React API if you'd lik
113113

114114
From React's point of view, a component using Hooks is just a regular component. If your testing solution doesn't rely on React internals, testing components with Hooks shouldn't be different from how you normally test components.
115115

116+
For example, let's say we have this counter component:
117+
118+
```js
119+
function Example() {
120+
const [count, setCount] = useState(0);
121+
useEffect(() => {
122+
document.title = `You clicked ${count} times`;
123+
});
124+
return (
125+
<div>
126+
<p>You clicked {count} times</p>
127+
<button onClick={() => setCount(count + 1)}>
128+
Click me
129+
</button>
130+
</div>
131+
);
132+
}
133+
```
134+
135+
We'll test it using React DOM. To make sure that the behavior matches what happens in the browser, we'll wrap the code rendering and updating it into [`ReactTestUtils.act()`](/docs/test-utils.html#act) calls:
136+
137+
```js{3,20-22,29-31}
138+
import React from 'react';
139+
import ReactDOM from 'react-dom';
140+
import { act } from 'react-dom/test-utils';
141+
import Counter from './Counter';
142+
143+
let container;
144+
145+
beforeEach(() => {
146+
container = document.createElement('div');
147+
document.body.appendChild(container);
148+
});
149+
150+
afterEach(() => {
151+
document.body.removeChild(container);
152+
container = null;
153+
});
154+
155+
it('can render and update a counter', () => {
156+
// Test first render and componentDidMount
157+
act(() => {
158+
ReactDOM.render(<Counter />, container);
159+
});
160+
const button = container.querySelector('button');
161+
const label = container.querySelector('p');
162+
expect(label.textContent).toBe('You clicked 0 times');
163+
expect(document.title).toBe('You clicked 0 times');
164+
165+
// Test second render and componentDidUpdate
166+
act(() => {
167+
button.dispatchEvent(new MouseEvent('click', {bubbles: true}));
168+
});
169+
expect(label.textContent).toBe('You clicked 1 times');
170+
expect(document.title).toBe('You clicked 1 times');
171+
});
172+
```
173+
174+
The calls to `act()` will also flush the effects inside of them.
175+
116176
If you need to test a custom Hook, you can do so by creating a component in your test, and using your Hook from it. Then you can test the component you wrote.
117177

178+
To reduce the boilerplate, we recommend using [`react-testing-library`](https://git.io/react-testing-library) which is designed to encourage writing tests that use your components as the end users do.
179+
118180
### What exactly do the [lint rules](https://www.npmjs.com/package/eslint-plugin-react-hooks) enforce?
119181

120182
We provide an [ESLint plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) that enforces [rules of Hooks](/docs/hooks-rules.html) to avoid bugs. It assumes that any function starting with "`use`" and a capital letter right after it is a Hook. We recognize this heuristic isn't perfect and there may be some false positives, but without an ecosystem-wide convention there is just no way to make Hooks work well -- and longer names will discourage people from either adopting Hooks or following the convention.

0 commit comments

Comments
 (0)