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
{{ message }}
This repository was archived by the owner on Jan 26, 2019. It is now read-only.
Copy file name to clipboardexpand all lines: packages/react-scripts/template/README.md
+19-19
Original file line number
Diff line number
Diff line change
@@ -1246,9 +1246,9 @@ There is a broad spectrum of component testing techniques. They range from a “
1246
1246
1247
1247
Different projects choose different testing tradeoffs based on how often components change, and how much logic they contain. If you haven’t decided on a testing strategy yet, we recommend that you start with creating simple smoke tests for your components:
1248
1248
1249
-
```js
1250
-
importReactfrom'react';
1251
-
importReactDOMfrom'react-dom';
1249
+
```ts
1250
+
import*asReactfrom'react';
1251
+
import*asReactDOMfrom'react-dom';
1252
1252
importAppfrom'./App';
1253
1253
1254
1254
it('renders without crashing', () => {
@@ -1257,38 +1257,38 @@ it('renders without crashing', () => {
1257
1257
});
1258
1258
```
1259
1259
1260
-
This test mounts a component and makes sure that it didn’t throw during rendering. Tests like this provide a lot value with very little effort so they are great as a starting point, and this is the test you will find in `src/App.test.js`.
1260
+
This test mounts a component and makes sure that it didn’t throw during rendering. Tests like this provide a lot value with very little effort so they are great as a starting point, and this is the test you will find in `src/App.test.tsx`.
1261
1261
1262
1262
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.
1263
1263
1264
1264
If you’d like to test components in isolation from the child components they render, we recommend using [`shallow()` rendering API](http://airbnb.io/enzyme/docs/api/shallow.html) from [Enzyme](http://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.)
1277
1277
1278
1278
The adapter will also need to be configured in your [global setup file](#initializing-test-environment):
1279
1279
1280
-
#### `src/setupTests.js`
1281
-
```js
1282
-
import{ configure }from'enzyme';
1283
-
importAdapterfrom'enzyme-adapter-react-16';
1280
+
#### `src/setupTests.ts`
1281
+
```ts
1282
+
import*asEnzymefrom'enzyme';
1283
+
import*asAdapterfrom'enzyme-adapter-react-16';
1284
1284
1285
-
configure({ adapter:newAdapter() });
1285
+
Enzyme.configure({ adapter: newAdapter() });
1286
1286
```
1287
1287
1288
1288
Now you can write a smoke test with it:
1289
1289
1290
-
```js
1291
-
importReactfrom'react';
1290
+
```ts
1291
+
import*asReactfrom'react';
1292
1292
import { shallow } from'enzyme';
1293
1293
importAppfrom'./App';
1294
1294
@@ -1303,8 +1303,8 @@ You can read the [Enzyme documentation](http://airbnb.io/enzyme/) for more testi
1303
1303
1304
1304
Here is an example from Enzyme documentation that asserts specific output, rewritten to use Jest matchers:
1305
1305
1306
-
```js
1307
-
importReactfrom'react';
1306
+
```ts
1307
+
import*asReactfrom'react';
1308
1308
import { shallow } from'enzyme';
1309
1309
importAppfrom'./App';
1310
1310
@@ -1337,7 +1337,7 @@ Alternatively you may use `yarn`:
1337
1337
yarn add jest-enzyme
1338
1338
```
1339
1339
1340
-
Import it in [`src/setupTests.js`](#initializing-test-environment) to make its matchers available in every test:
1340
+
Import it in [`src/setupTests.ts`](#initializing-test-environment) to make its matchers available in every test:
1341
1341
1342
1342
```js
1343
1343
import'jest-enzyme';
@@ -1360,12 +1360,12 @@ and then use them in your tests like you normally do.
1360
1360
1361
1361
>Note: this feature is available with `react-scripts@0.4.0` and higher.
1362
1362
1363
-
If your app uses a browser API that you need to mock in your tests or if you just need a global setup before running your tests, add a `src/setupTests.js` to your project. It will be automatically executed before running your tests.
1363
+
If your app uses a browser API that you need to mock in your tests or if you just need a global setup before running your tests, add a `src/setupTests.ts` to your project. It will be automatically executed before running your tests.
0 commit comments