Where should the enzyme setup file be written?

Question

Yesterday I upgraded my React project to v16.0, but I found that Enzyme had some problems

    Error:        Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none. To       configure an adapter, you should call `Enzyme.configure({ adapter: new Adapter() })`       before using any of Enzyme's top level APIs, where `Adapter` is the adapter       corresponding to the library currently being tested. For example:       import Adapter from 'enzyme-adapter-react-15';       To find out more about this, see http://airbnb.io/enzyme/docs/installation/index.html      at validateAdapter (spec/components/page_components/SongListItem/index.spec.js:9:1141986)     at getAdapter (spec/components/page_components/SongListItem/index.spec.js:9:323041)     at new ReactWrapper (spec/components/page_components/SongListItem/index.spec.js:9:622193)     at mount (spec/components/page_components/SongListItem/index.spec.js:9:2025476)     at UserContext.<anonymous> (spec/components/page_components/SongListItem/index.spec.js:9:1235741) 

And I found a solution on the official website

// setup file import { configure } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16';  configure({ adapter: new Adapter() }); 

But I have a problem: Where should the enzyme setup file be written? In front of each test file?

I tried to add the above code to one of the test files, But there is still a problem

 Internal error: attempt to prepend statements in disallowed (non-array) context at C:/Users/killer/workspace/react/NetEase-Cloud-Music-Web/spec/components/page_components/SongListItem/index.spec.js 

This is the address of my project

Answer 1

I had a similar issue

If you are using jest to run your tests, you can create a test-setup.js file and add the snippet from the enzyme docs:

// test-setup.js import { configure } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16';  configure({ adapter: new Adapter() }); 

then add a setupTestFrameworkScriptFile key in your jest configuration and point to that file. For example, if your jest configuration is in package.json:

// package.json {     ...,     "jest": {         "setupTestFrameworkScriptFile": "<rootDir>/test-setup.js"     } } 

from the jest docs https://facebook.github.io/jest/docs/en/configuration.html#setuptestframeworkscriptfile-string:

The path to a module that runs some code to configure or set up the testing framework before each test. Since setupFiles executes before the test framework is installed in the environment, this script file presents you the opportunity of running some code immediately after the test framework has been installed in the environment.

This will execute after your jest environment is initialised, but before your enzyme tests are executed

For people using create-react-app
You need to run yarn eject or npm run eject, then you will see jest configuration in your package.json.
In addition, setupTestFrameworkScriptFile is currently deprecated in favor of setupFilesAfterEnv.

Answer 2

For people using create-react-app, the expected path for your setup file is src/setupTests.js. See the documentation (README) on GitHub:

Initializing Test Environment

Note: this feature is available with [email protected] 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.

(As create-react-app does not handle, at least in v1.4.1, the option setupTestFrameworkScriptFile in package.json).