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
+22-14
Original file line number
Diff line number
Diff line change
@@ -1244,9 +1244,9 @@ There is a broad spectrum of component testing techniques. They range from a “
1244
1244
1245
1245
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:
1246
1246
1247
-
```js
1248
-
importReactfrom'react';
1249
-
importReactDOMfrom'react-dom';
1247
+
```ts
1248
+
import*asReactfrom'react';
1249
+
import*asReactDOMfrom'react-dom';
1250
1250
importAppfrom'./App';
1251
1251
1252
1252
it('renders without crashing', () => {
@@ -1255,26 +1255,34 @@ it('renders without crashing', () => {
1255
1255
});
1256
1256
```
1257
1257
1258
-
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`.
1258
+
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`.
1259
1259
1260
1260
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.
1261
1261
1262
1262
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:
@@ -1289,8 +1297,8 @@ You can read the [Enzyme documentation](http://airbnb.io/enzyme/) for more testi
1289
1297
1290
1298
Here is an example from Enzyme documentation that asserts specific output, rewritten to use Jest matchers:
1291
1299
1292
-
```js
1293
-
importReactfrom'react';
1300
+
```ts
1301
+
import*asReactfrom'react';
1294
1302
import { shallow } from'enzyme';
1295
1303
importAppfrom'./App';
1296
1304
@@ -1323,7 +1331,7 @@ Alternatively you may use `yarn`:
1323
1331
yarn add jest-enzyme
1324
1332
```
1325
1333
1326
-
Import it in [`src/setupTests.js`](#initializing-test-environment) to make its matchers available in every test:
1334
+
Import it in [`src/setupTests.ts`](#initializing-test-environment) to make its matchers available in every test:
1327
1335
1328
1336
```js
1329
1337
import'jest-enzyme';
@@ -1346,12 +1354,12 @@ and then use them in your tests like you normally do.
1346
1354
1347
1355
>Note: this feature is available with `react-scripts@0.4.0` and higher.
1348
1356
1349
-
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.
1357
+
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