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: docs/recipes/react.md
+10-8
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
3
3
## Setting up Babel
4
4
5
-
The first thing you need to do is to set up `babel` to transpile JSX code from the tests by adding an AVA section to your `package.json`:
5
+
The first step is setting up Babel to transpile JSX code from the tests by adding an AVA section to your package.json:
6
6
7
7
```json
8
8
{
@@ -15,21 +15,21 @@ The first thing you need to do is to set up `babel` to transpile JSX code from t
15
15
}
16
16
```
17
17
18
-
You can find more information about setting up `babel` with AVA in the [babelrc recipe](https://github.com/sindresorhus/ava/blob/master/docs/recipes/babelrc.md).
18
+
You can find more information about setting up Babel with AVA in the [babelrc recipe](babelrc.md).
19
19
20
20
## Using [Enzyme](https://github.com/airbnb/enzyme)
21
21
22
22
Let's first see how to use AVA with one of the most popular React testing libraries: [Enzyme](https://github.com/airbnb/enzyme).
23
23
24
-
If you only plan to use [shallow component rendering](https://facebook.github.io/react/docs/test-utils.html#shallow-rendering), you don't need any extra setup.
24
+
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.
25
25
26
26
First install [Enzyme required packages](https://github.com/airbnb/enzyme/#installation):
@@ -69,9 +69,9 @@ test('renders children when passed in', t => {
69
69
70
70
Enzyme also has a `mount` and `render` helper to test in an actual browser environment. If you want to use these helpers, you will have to setup a browser environment. Check out the [browser testing recipe](https://github.com/sindresorhus/ava/blob/master/docs/recipes/browser-testing.md) on how to do so.
71
71
72
-
To see an example of AVA working together with Enzyme, set up for browser testing, have a look at [this sample project](https://github.com/adriantoine/ava-enzyme-demo).
72
+
To see an example of AVA working together with Enzyme set up for browser testing, have a look at [this sample project](https://github.com/adriantoine/ava-enzyme-demo).
73
73
74
-
This is a basic example about how to integrate Enzyme with AVA. For more information about using Enzyme for unit testing React component, have a look at [Enzyme's documentation](http://airbnb.io/enzyme/).
74
+
This is a basic example on how to integrate Enzyme with AVA. For more information about using Enzyme for unit testing React component, have a look at [Enzyme's documentation](http://airbnb.io/enzyme/).
75
75
76
76
## Using JSX helpers
77
77
@@ -129,15 +129,17 @@ test('renders children when passed in', t => {
129
129
130
130
Note that you have to use variables like `actual` and `expected` because [`power-assert` doesn't handle JSX correctly](https://github.com/power-assert-js/power-assert/issues/34).
131
131
132
-
This is a basic example about how to use `jsx-test-helpers` with AVA. To see a more advanced usage of this library, have a look at [this annotated test file](https://github.com/MoOx/jsx-test-helpers/blob/master/src/__tests__/index.js).
132
+
This is a basic example on how to use `jsx-test-helpers` with AVA. To see a more advanced usage of this library, have a look at [this annotated test file](https://github.com/MoOx/jsx-test-helpers/blob/master/src/__tests__/index.js).
133
133
134
134
[This sample project](https://github.com/MoOx/jsx-test-helpers) shows a basic and minimal setup of AVA with `jsx-test-helpers`.
135
135
136
136
## Using other assertion libraries
137
137
138
-
In AVA, you can use any assertion library and there is already a few out there allowing to test React components. Here is a list of assertion libraries working well with AVA:
138
+
In AVA, you can use any assertion library, and there are already a few out there to test React components. Here is a list of assertion libraries working well with AVA:
-[`unexpected-react`](https://github.com/bruderstein/unexpected-react) ([Sample project with an output example](https://github.com/adriantoine/ava-unexpected-react-demo))
141
142
142
143
## Reference
144
+
143
145
-[In depth guide of setting up AVA with code coverage on a React project](https://github.com/kentcdodds/react-ava-workshop)
0 commit comments