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

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)

我在官方website上找到了解决办法

// 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

This是我项目的地址

Answer 1

我有类似的问题

如果您使用 jest 运行测试，您可以创建一个 test-setup.js 文件并添加酶文档中的 sn-p：

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

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

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

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

来自开玩笑的文档 https://facebook.github.io/jest/docs/en/configuration.html#setuptestframeworkscriptfile-string:

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

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

对于使用 create-react-app 的人
您需要运行yarn eject 或npm run eject，然后您将在package.json 中看到笑话配置。
此外，setupTestFrameworkScriptFile 目前已弃用，取而代之的是 setupFilesAfterEnv。

Answer 2

对于使用 create-react-app 的用户，您的安装文件的预期路径是 src/setupTests.js。请参阅 GitHub 上的 documentation（自述文件）：

初始化测试环境

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

（由于 create-react-app 至少在 v1.4.1 中无法处理 package.json 中的选项 setupTestFrameworkScriptFile）。

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属性值作为数组。

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

更多信息

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

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

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

此设置适用于 react 16

Answer 4

React v16 抛出 Enzyme internal error 时遇到了类似的问题。您必须将以下代码放入 src/setupTests.js：

import Enzyme from "enzyme";
import EnzymeAdapter from "enzyme-adapter-react-16";

Enzyme.configure({
  adapter: new EnzymeAdapter(),
});

在 package.json 文件中配置 jest。添加以下行：

  "jest": {
    ...
    "setupFilesAfterEnv": [
      "<rootDir>/src/setupTests.js"
    ],
    ...
  },

Answer 5

无需在 package.json 中添加配置。只需在“src”文件夹下添加一个“setupTests.js”文件并添加行

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

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

如果你尝试添加配置，开玩笑会抛出这样的错误。

我们在您的 package.json 中检测到 setupFilesAfterEnv。

将其从 Jest 配置中移除，并将初始化代码放入 src/setupTests.js。该文件将自动加载