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

gaelollivier · 2016-09-02T14:38:13Z

Test plan

Run npm run create-react-app my-app and in the generated App.js, add something like localStorage.getItem('test');. Run npm test, it should fail because localStorage is undefined. Add a setupTests.js in src that looks like this:

const localStorageMock = {
  getItem: jest.fn(),
  setItem: jest.fn(),
  clear: jest.fn()
};
global.localStorage = localStorageMock

Then run npm test again (you need to re-run the command in order to have the setupTests.js added to Jest config) and it should pass.
You can also simply add a setupTests.js that does a console.log('Hello world') to check it's properly executed before the tests.

ghost · 2016-09-02T14:38:25Z

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla - and if you have received this in error or have any questions, please drop us a line at cla@fb.com. Thanks!

gaearon · 2016-09-02T14:40:54Z

Can you please specify the test plan?

See https://github.com/facebookincubator/create-react-app/blob/master/CONTRIBUTING.md#submitting-a-pull-request:

Please also provide a test plan, i.e. specify how you verified that your addition works.

ghost · 2016-09-02T14:44:36Z

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

gaelollivier · 2016-09-02T14:48:35Z

Test plan added to the initial PR description:

Test plan

Run npm run create-react-app my-app. The template setupTests.js is added in src. Any code in this file should be executed when you run your tests via npm test (for example, add a console.log("Hello world!");, this should be printed in the tests report). If you remove the file, npm test still works as before.

gaearon · 2016-09-02T15:05:48Z

template/src/setupTests.js

@@ -0,0 +1,4 @@
+/**


I think we shouldn’t ship this by default. It’s a little bit advanced feature, and it’s fine to just document it. Can you add relevant documentation section to template/README.md instead?

gaelollivier · 2016-09-02T16:20:42Z

Removed the sample 'setupTests.js' and added docs to the README.md

gaearon · 2016-09-02T16:56:08Z

Sorry for the trouble but I just merged another set of changes that made this conflict.
Could you please rebase?

gaearon · 2016-09-02T16:56:38Z

template/README.md

@@ -671,6 +672,22 @@ import { expect } from 'chai';

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

+### Test environment setup


Let’s call this ### Initializing Test Environment

gaelollivier · 2016-09-02T18:46:52Z

Fixed doc title and conflicts ✅

gaearon · 2016-09-02T18:50:25Z

template/README.md

@@ -674,6 +675,22 @@ import { expect } from 'chai';

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

+### Initializing Test Environment
+


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.

…#545)

gaearon · 2016-09-02T19:27:14Z

Awesome. Thank you.

cpojer · 2016-09-02T19:46:12Z

scripts/utils/createJestConfig.js

  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,


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

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

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

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

gaearon · 2016-09-02T21:19:16Z

Out in 0.4.0.
See the release notes!

…#545) (facebook#548)