酶设置文件应该写在哪里？

Question

昨天我将我的React项目升级到v16.0,但我发现Enzyme有一些问题

    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)

我在官方网站上找到了解决方案

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

configure({ adapter: new Adapter() });

但我有一个问题:酶设置文件应该写在哪里？在每个测试文件前面？

我试图将上面的代码添加到其中一个测试文件中,但仍然存在问题

 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

这是我项目的地址

Answer 1

我有类似的问题

如果您使用jest来运行测试,您可以创建一个test-setup.js文件并添加来自酶docs的片段:

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

configure({ adapter: new Adapter() });

然后setupTestFrameworkScriptFile在您的jest配置中添加一个键并指向该文件.例如,如果您的jest配置位于package.json:

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

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

模块的路径,在每次测试之前运行一些代码来配置或设置测试框架.由于setupFiles在环境中安装测试框架之前执行,因此该脚本文件为您提供了在环境中安装测试框架后立即运行某些代码的机会.

这将在您的初始化环境初始化之后但在执行酶测试之前执行

Answer 2

对于使用create-react-app的人来说,您的安装文件的预期路径是src/setupTests.js.请参阅GitHub上的文档(README):

初始化测试环境

注意:此功能适用于react-scripts@0.4.0及更高版本.如果您的应用程序使用您需要在测试中进行模拟的浏览器API,或者在运行测试之前只需要全局设置,请将src/setupTests.js添加到项目中.它将在运行测试之前自动执行.

(因为create-react-app不能处理,至少在v1.4.1中,是setupTestFrameworkScriptFilepackage.json中的选项).

Answer 3

2019 年 6 月更新

使用CRA (create-react-app) 的人src/setupTests.js将无法工作！jest.config.js在项目根文件夹中创建文件并粘贴下面的内容，

module.exports = {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(scss|sass|css)$": "identity-obj-proxy"
    },
    "setupFilesAfterEnv": ["<rootDir>/src/setupTests.js"]
}

ModuleNameMapper 将避免静态文件导入语句（可选）。

由于setupTestFrameworkScriptFile已被弃用，所以我们必须使用setupFilesAfterEnv属性值作为数组。

确保您setupTests.js的项目 src 文件夹中有文件，或者在项目中指定 setupTests.js 文件位置。

更多信息

setupTests.js 文件应该有以下内容，

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

此设置适用于 react 16