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.

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

Add src/setupTests.js to specify environment setup for Jest (#545) #548

Merged
merged 1 commit into from
Sep 2, 2016
Merged
Changes from all commits
Commits
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
Add src/setupTests.js to specify environment setup for Jest (#545)
  • Loading branch information
Gael du Plessix committed Sep 2, 2016
commit 7312fe9190ff33f7d233d4aa79977be1264f4ca8
3 changes: 3 additions & 0 deletions config/paths.js
Original file line number Diff line number Diff line change
@@ -37,6 +37,7 @@ module.exports = {
appHtml: resolveApp('index.html'),
appPackageJson: resolveApp('package.json'),
appSrc: resolveApp('src'),
testsSetup: resolveApp('src/setupTests.js'),
appNodeModules: resolveApp('node_modules'),
ownNodeModules: resolveApp('node_modules'),
nodePaths: nodePaths
@@ -53,6 +54,7 @@ module.exports = {
appHtml: resolveApp('index.html'),
appPackageJson: resolveApp('package.json'),
appSrc: resolveApp('src'),
testsSetup: resolveApp('src/setupTests.js'),
appNodeModules: resolveApp('node_modules'),
// this is empty with npm3 but node resolution searches higher anyway:
ownNodeModules: resolveOwn('../node_modules'),
@@ -66,6 +68,7 @@ module.exports = {
appHtml: resolveOwn('../template/index.html'),
appPackageJson: resolveOwn('../package.json'),
appSrc: resolveOwn('../template/src'),
testsSetup: resolveOwn('../template/src/setupTests.js'),
appNodeModules: resolveOwn('../node_modules'),
ownNodeModules: resolveOwn('../node_modules'),
nodePaths: nodePaths
10 changes: 9 additions & 1 deletion scripts/utils/createJestConfig.js
Original file line number Diff line number Diff line change
@@ -9,14 +9,22 @@
*/
// @remove-on-eject-end

const pathExists = require('path-exists');
const paths = require('../../config/paths');

module.exports = (resolve, rootDir) => {
const setupFiles = [resolve('config/polyfills.js')];
if (pathExists.sync(paths.testsSetup)) {
setupFiles.push(paths.testsSetup);
}

const config = {
moduleNameMapper: {
'^[./a-zA-Z0-9$_-]+\\.(jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm)$': resolve('config/jest/FileStub.js'),
'^[./a-zA-Z0-9$_-]+\\.css$': resolve('config/jest/CSSStub.js')
},
scriptPreprocessor: resolve('config/jest/transform.js'),
setupFiles: [resolve('config/polyfills.js')],
setupFiles: setupFiles,
Copy link
Contributor

Choose a reason for hiding this comment

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

nit: you don't need the : setupFiles piece here because of object short notation.

Copy link
Contributor

Choose a reason for hiding this comment

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

I’m not sure Node 4 supports it, does it?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

True, wasn't sure of what es6 features I could use there since there are some "var" elsewhere in the code :s

Copy link
Contributor

Choose a reason for hiding this comment

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

yes, it does! Node 4 supports let/var as well as object short notation and arrow functions.

testPathIgnorePatterns: ['<rootDir>/(build|docs|node_modules)/'],
testEnvironment: 'node'
};
19 changes: 19 additions & 0 deletions template/README.md
Original file line number Diff line number Diff line change
@@ -32,6 +32,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
- [Writing Tests](#writing-tests)
- [Testing Components](#testing-components)
- [Using Third Party Assertion Libraries](#using-third-party-assertion-libraries)
- [Initializing Test Environment](#initializing-test-environment)
- [Focusing and Excluding Tests](#focusing-and-excluding-tests)
- [Coverage Reporting](#coverage-reporting)
- [Continuous Integration](#continuous-integration)
@@ -674,6 +675,24 @@ import { expect } from 'chai';

and then use them in your tests like you normally do.

### Initializing Test Environment

Copy link
Contributor

Choose a reason for hiding this comment

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

Please add “>Note: this feature is available since react-scripts@0.4.0” here. You can copy and paste an existing similar notes and change the version.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Done

>Note: this feature is available with `react-scripts@0.4.0` and higher.

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.

For example:

#### `src/setupTests.js`
```js
const localStorageMock = {
getItem: jest.fn(),
setItem: jest.fn(),
clear: jest.fn()
};
global.localStorage = localStorageMock
```

### Focusing and Excluding Tests

You can replace `it()` with `xit()` to temporarily exclude a test from being executed.