Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use jsdom environment for tests by default #3962

Closed
wants to merge 1 commit into from
Closed

Use jsdom environment for tests by default #3962

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"start": "cd packages/react-scripts && node bin/react-scripts.js start",
"screencast": "node ./tasks/screencast.js",
"screencast:error": "svg-term --cast jyu19xGl88FQ3poMY8Hbmfw8y --out screencast-error.svg --window --at 12000 --no-cursor",
"test": "cd packages/react-scripts && node bin/react-scripts.js test --env=jsdom",
"test": "cd packages/react-scripts && node bin/react-scripts.js test",
"format": "prettier --trailing-comma es5 --single-quote --write 'packages/*/*.js' 'packages/*/!(node_modules)/**/*.js'",
"precommit": "lint-staged"
},
Expand Down
2 changes: 1 addition & 1 deletion packages/react-scripts/fixtures/monorepos/packages/cra-app1/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"browserslist": {
Expand Down
2 changes: 1 addition & 1 deletion packages/react-scripts/scripts/init.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ module.exports = function(
appPackage.scripts = {
start: 'react-scripts start',
build: 'react-scripts build',
test: 'react-scripts test --env=jsdom',
test: 'react-scripts test',
eject: 'react-scripts eject',
};

Expand Down
2 changes: 1 addition & 1 deletion packages/react-scripts/scripts/utils/createJestConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ module.exports = (resolve, rootDir, srcRoots) => {
],
// where to search for files/tests
roots: srcRoots.map(toRelRootDir),
testEnvironment: 'node',
testEnvironment: 'jsdom',
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This can actually be omitted, because that's the Jest's default, but decided to left as is for now.

testURL: 'http://localhost',
transform: {
'^.+\\.(js|jsx|mjs)$': resolve('config/jest/babelTransform.js'),
Expand Down
21 changes: 10 additions & 11 deletions packages/react-scripts/template/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -620,7 +620,7 @@ Then in `package.json`, add the following lines to `scripts`:
+ "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"test": "react-scripts test",
```

>Note: To use a different preprocessor, replace `build-css` and `watch-css` commands according to your preprocessor’s documentation.
Expand Down Expand Up @@ -669,7 +669,7 @@ Then we can change `start` and `build` scripts to include the CSS preprocessor c
+ "start": "npm-run-all -p watch-css start-js",
+ "build-js": "react-scripts build",
+ "build": "npm-run-all build-css build-js",
"test": "react-scripts test --env=jsdom",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
```
Expand Down Expand Up @@ -1644,17 +1644,17 @@ By default, the `package.json` of the generated project looks like this:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom"
"test": "react-scripts test"
```

If you know that none of your tests depend on [jsdom](https://github.com/tmpvar/jsdom), you can safely remove `--env=jsdom`, and your tests will run faster:
If you know that none of your tests depend on [jsdom](https://github.com/tmpvar/jsdom), which is the default test environment for CRA, you can safely add `--env=node` to override it, and your tests will run faster:

```diff
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
- "test": "react-scripts test --env=jsdom"
+ "test": "react-scripts test"
- "test": "react-scripts test"
+ "test": "react-scripts test --env=node"
```

To help you make up your mind, here is a list of APIs that **need jsdom**:
Expand Down Expand Up @@ -1692,7 +1692,7 @@ There are various ways to setup a debugger for your Jest tests. We cover debuggi
Add the following to the `scripts` section in your project's `package.json`
```json
"scripts": {
"test:debug": "react-scripts --inspect-brk test --runInBand --env=jsdom"
"test:debug": "react-scripts --inspect-brk test --runInBand"
}
```
Place `debugger;` statements in any test and run:
Expand Down Expand Up @@ -1728,8 +1728,7 @@ Use the following [`launch.json`](https://code.visualstudio.com/docs/editor/debu
"args": [
"test",
"--runInBand",
"--no-cache",
"--env=jsdom"
"--no-cache"
],
"cwd": "${workspaceRoot}",
"protocol": "inspector",
Expand Down Expand Up @@ -2025,7 +2024,7 @@ Then in `package.json`, add the following line to `scripts`:
+ "analyze": "source-map-explorer build/static/js/main.*",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"test": "react-scripts test",
```

Then to analyze the bundle run the production build then run the analyze
Expand Down Expand Up @@ -2483,7 +2482,7 @@ If none of these solutions help please leave a comment [in this thread](https://

### `npm test` hangs on macOS Sierra

If you run `npm test` and the console gets stuck after printing `react-scripts test --env=jsdom` to the console there might be a problem with your [Watchman](https://facebook.github.io/watchman/) installation as described in [facebook/create-react-app#713](https://github.com/facebook/create-react-app/issues/713).
If you run `npm test` and the console gets stuck after printing `react-scripts test` to the console there might be a problem with your [Watchman](https://facebook.github.io/watchman/) installation as described in [facebook/create-react-app#713](https://github.com/facebook/create-react-app/issues/713).

We recommend deleting `node_modules` in your project and running `npm install` (or `yarn` if you use it) first. If it doesn't help, you can try one of the numerous workarounds mentioned in these issues:

Expand Down