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

Posted 2023-02-21

【中文标题】酶设置文件应该写在哪里？

【英文标题】：Where should the enzyme setup file be written?

【发布时间】：2018-03-19 12:51:48

【问题描述】：

昨天我把我的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是我项目的地址

【参考方案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。

【讨论】：

我试过了，仍然遇到同样的适配器错误，在这个问题上已经 3 小时了。有人有其他方法吗？

现代 create-react-app 版本无需弹出。它将默认执行src/setupTests。如果没有，您仍然可以将其作为 CLI 参数传递给 test script 的 package.json react-scripts test --setupFilesAfterEnv='./src/setupTests.ts'

第二次 MrKey 的评论——请参阅 @VinceOPS answer below 了解更多信息。

【参考方案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）。

【参考方案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

【讨论】：

此设置后要运行的任何命令？？即使在您要求执行的设置之后，我也会收到相同的错误。

好一个；）除了npm run test之外，没有其他命令可以为我运行

可能有助于在enzymejs.github.io/enzyme之后安装最新的反应版本

并检查我没有在您的 package.json 中的“jest”条目中保留不受支持的键

最后我的 .eslintrc 也提到了 jest 以避免无法识别的问题 "it": "env": "browser": true, "jest": true ,

【参考方案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"
    ],
    ...
  ,

【参考方案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。该文件将自动加载