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.