Skip to content

Commit db5d2c3

Browse files
Update enzyme recipe to work with latest enzyme
1 parent 983ce0c commit db5d2c3

File tree

1 file changed

+44
-5
lines changed

1 file changed

+44
-5
lines changed

docs/recipes/react.md

+44-5
Original file line numberDiff line numberDiff line change
@@ -26,21 +26,59 @@ You can find more information in [`@ava/babel`](https://github.com/avajs/babel).
2626

2727
## Using [Enzyme](https://github.com/airbnb/enzyme)
2828

29-
Let's first see how to use AVA with one of the most popular React testing libraries: [Enzyme](https://github.com/airbnb/enzyme).
29+
Let's first see how to use AVA with one of the most popular React testing libraries: [Enzyme](https://github.com/enzymejs/enzyme).
3030

3131
If you intend to only use [shallow component rendering](https://facebook.github.io/react/docs/test-utils.html#shallow-rendering), you don't need any extra setup.
3232

33-
First install [Enzyme required packages](https://github.com/airbnb/enzyme/#installation):
33+
### Install Enzyme
34+
35+
First install [Enzyme and its required adapter](https://github.com/enzymejs/enzyme#installation):
3436

3537
```console
36-
$ npm install --save-dev enzyme react-addons-test-utils react-dom
38+
$ npm install --save-dev enzyme enzyme-adapter-react-16
39+
```
40+
41+
### Set up Enzyme
42+
43+
Create a helper file, prefixed with an underscore. This ensures AVA does not treat it as a test.
44+
45+
`test/_setup-enzyme-adapter.js`:
46+
47+
```js
48+
const Enzyme = require('enzyme');
49+
const Adapter = require('enzyme-adapter-react-16');
50+
51+
Enzyme.configure({
52+
adapter: new Adapter()
53+
});
54+
```
55+
56+
### Configure tests to use Enzyme
57+
58+
Configure AVA to `require` the helper before every test file.
59+
60+
**`package.json`:**
61+
62+
```json
63+
{
64+
"ava": {
65+
"require": [
66+
"./test/_setup-enzyme-adapter.js"
67+
]
68+
}
69+
}
3770
```
3871

72+
### Enjoy
73+
3974
Then you can use Enzyme straight away:
4075

76+
`test.js`:
77+
4178
```js
4279
const test = require('ava');
4380
const React = require('react');
81+
const PropTypes = require('prop-types');
4482
const {shallow} = require('enzyme');
4583

4684
const Foo = ({children}) =>
@@ -51,7 +89,7 @@ const Foo = ({children}) =>
5189
</div>;
5290

5391
Foo.propTypes = {
54-
children: React.PropTypes.any
92+
children: PropTypes.any
5593
};
5694

5795
test('has a .Foo class name', t => {
@@ -93,6 +131,7 @@ Usage example:
93131
```js
94132
const test = require('ava');
95133
const React = require('react');
134+
const PropTypes = require('prop-types');
96135
const {renderJSX, JSX} = require('jsx-test-helpers');
97136

98137
const Foo = ({children}) =>
@@ -103,7 +142,7 @@ const Foo = ({children}) =>
103142
</div>;
104143

105144
Foo.propTypes = {
106-
children: React.PropTypes.any
145+
children: PropTypes.any
107146
};
108147

109148
test('renders correct markup', t => {

0 commit comments

Comments
 (0)