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

Commit 8e0ebe2

Browse files
authored
Merge pull request #199 from DorianGrey/master
Adjust 'Testing components' section to use the correct TS versions.
2 parents 923b627 + 6277b60 commit 8e0ebe2

File tree

1 file changed

+19
-19
lines changed

1 file changed

+19
-19
lines changed

packages/react-scripts/template/README.md

+19-19
Original file line numberDiff line numberDiff line change
@@ -1246,9 +1246,9 @@ There is a broad spectrum of component testing techniques. They range from a “
12461246

12471247
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:
12481248

1249-
```js
1250-
import React from 'react';
1251-
import ReactDOM from 'react-dom';
1249+
```ts
1250+
import * as React from 'react';
1251+
import * asReactDOM from 'react-dom';
12521252
import App from './App';
12531253

12541254
it('renders without crashing', () => {
@@ -1257,38 +1257,38 @@ it('renders without crashing', () => {
12571257
});
12581258
```
12591259

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

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

12641264
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:
12651265

12661266
```sh
1267-
npm install --save enzyme enzyme-adapter-react-16 react-test-renderer
1267+
npm install --save enzyme @types/enzyme enzyme-adapter-react-16 @types/enzyme-adapter-react-16 react-test-renderer @types/react-test-renderer
12681268
```
12691269

12701270
Alternatively you may use `yarn`:
12711271

12721272
```sh
1273-
yarn add enzyme enzyme-adapter-react-16 react-test-renderer
1273+
yarn add enzyme @types/enzyme enzyme-adapter-react-16 @types/enzyme-adapter-react-16 react-test-renderer @types/react-test-renderer
12741274
```
12751275

12761276
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.)
12771277

12781278
The adapter will also need to be configured in your [global setup file](#initializing-test-environment):
12791279

1280-
#### `src/setupTests.js`
1281-
```js
1282-
import { configure } from 'enzyme';
1283-
import Adapter from 'enzyme-adapter-react-16';
1280+
#### `src/setupTests.ts`
1281+
```ts
1282+
import * as Enzyme from 'enzyme';
1283+
import * as Adapter from 'enzyme-adapter-react-16';
12841284

1285-
configure({ adapter: new Adapter() });
1285+
Enzyme.configure({ adapter: new Adapter() });
12861286
```
12871287

12881288
Now you can write a smoke test with it:
12891289

1290-
```js
1291-
import React from 'react';
1290+
```ts
1291+
import * as React from 'react';
12921292
import { shallow } from 'enzyme';
12931293
import App from './App';
12941294

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

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

1306-
```js
1307-
import React from 'react';
1306+
```ts
1307+
import * as React from 'react';
13081308
import { shallow } from 'enzyme';
13091309
import App from './App';
13101310

@@ -1337,7 +1337,7 @@ Alternatively you may use `yarn`:
13371337
yarn add jest-enzyme
13381338
```
13391339

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

13421342
```js
13431343
import 'jest-enzyme';
@@ -1360,12 +1360,12 @@ and then use them in your tests like you normally do.
13601360

13611361
>Note: this feature is available with `react-scripts@0.4.0` and higher.
13621362
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.
13641364

13651365
For example:
13661366

1367-
#### `src/setupTests.js`
1368-
```js
1367+
#### `src/setupTests.ts`
1368+
```ts
13691369
const localStorageMock = {
13701370
getItem: jest.fn(),
13711371
setItem: jest.fn(),

0 commit comments

Comments
 (0)