Skip to content
This repository was archived by the owner on Jan 26, 2019. It is now read-only.

Commit 05d5a6c

Browse files
DorianGreywmonk
authored andcommitted
Merge pull request #199 from DorianGrey/master
Adjust 'Testing components' section to use the correct TS versions.
1 parent 9e4589f commit 05d5a6c

File tree

1 file changed

+22
-14
lines changed

1 file changed

+22
-14
lines changed

packages/react-scripts/template/README.md

+22-14
Original file line numberDiff line numberDiff line change
@@ -1244,9 +1244,9 @@ There is a broad spectrum of component testing techniques. They range from a “
12441244

12451245
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:
12461246

1247-
```js
1248-
import React from 'react';
1249-
import ReactDOM from 'react-dom';
1247+
```ts
1248+
import * as React from 'react';
1249+
import * asReactDOM from 'react-dom';
12501250
import App from './App';
12511251

12521252
it('renders without crashing', () => {
@@ -1255,26 +1255,34 @@ it('renders without crashing', () => {
12551255
});
12561256
```
12571257

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`.
12591259

12601260
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.
12611261

12621262
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:
12631263

12641264
```sh
1265-
npm install --save enzyme react-test-renderer
1265+
npm install --save enzyme @types/enzyme enzyme-adapter-react-16 @types/enzyme-adapter-react-16 react-test-renderer @types/react-test-renderer
12661266
```
12671267

12681268
Alternatively you may use `yarn`:
12691269

12701270
```sh
1271-
yarn add enzyme react-test-renderer
1271+
yarn add enzyme @types/enzyme enzyme-adapter-react-16 @types/enzyme-adapter-react-16 react-test-renderer @types/react-test-renderer
1272+
```
1273+
1274+
#### `src/setupTests.ts`
1275+
```ts
1276+
import * as Enzyme from 'enzyme';
1277+
import * as Adapter from 'enzyme-adapter-react-16';
1278+
1279+
Enzyme.configure({ adapter: new Adapter() });
12721280
```
12731281

12741282
You can write a smoke test with it too:
12751283

1276-
```js
1277-
import React from 'react';
1284+
```ts
1285+
import * as React from 'react';
12781286
import { shallow } from 'enzyme';
12791287
import App from './App';
12801288

@@ -1289,8 +1297,8 @@ You can read the [Enzyme documentation](http://airbnb.io/enzyme/) for more testi
12891297

12901298
Here is an example from Enzyme documentation that asserts specific output, rewritten to use Jest matchers:
12911299

1292-
```js
1293-
import React from 'react';
1300+
```ts
1301+
import * as React from 'react';
12941302
import { shallow } from 'enzyme';
12951303
import App from './App';
12961304

@@ -1323,7 +1331,7 @@ Alternatively you may use `yarn`:
13231331
yarn add jest-enzyme
13241332
```
13251333

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:
13271335

13281336
```js
13291337
import 'jest-enzyme';
@@ -1346,12 +1354,12 @@ and then use them in your tests like you normally do.
13461354

13471355
>Note: this feature is available with `react-scripts@0.4.0` and higher.
13481356
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.
13501358

13511359
For example:
13521360

1353-
#### `src/setupTests.js`
1354-
```js
1361+
#### `src/setupTests.ts`
1362+
```ts
13551363
const localStorageMock = {
13561364
getItem: jest.fn(),
13571365
setItem: jest.fn(),

0 commit comments

Comments
 (0)