Question

我一直在使用Enzyme测试我的React应用程序中的组件。几个星期后我第一次更新我的软件包后，我开始从我的测试中得到错误。

 FAIL  src/__tests__/title.test.ts
  ● Testing title component › renders
Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none. [...] 
To find out more about this, see http://airbnb.io/enzyme/docs/installation/index.html

我按照链接中的描述继续安装'enzyme-adapter-react-16'，并将以下行添加到我的测试文件中：

import * as enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
enzyme.configure({ adapter: new Adapter() });

但是，由于我的应用程序是用TypeScript编写的，现在我遇到了两个新问题。

为了澄清图像，第一个错误TS7016是enzyme-adapter-react-16没有任何类型，第二个错误TS2339表示enzyme没有属性{{1 }}

我对TypeScript比较陌生，所以我需要一些帮助。我已尝试为configure安装类型，但这些类型似乎不存在。

我应该尝试自己添加它们，还是有某种方法可以一起避免这个问题？

还好奇是出现了这个错误的原因。我以前不需要适配器，为什么现在呢？

Answer 1

我应该尝试自己添加它们，还是有某种方法可以一起避免这个问题？

我相信你是正确的，目前没有enzyme-adapter-react-16的类型 - 它很新，所以似乎还没有人创造任何类型。

您可以自己创建它们，如果您认为它们定义得很好，您可以将它们贡献给DefinitelyTyped以供其他人使用。为了“避免”这个问题，你可以让TypeScript忽略它没有类型信息的事实。

忽略类型错误：

对于第一个错误，错误消息尝试帮助“添加新声明（.d.ts）文件...”。因此，您可以创建一个名为enzymeAdapter.d.ts的文件（我通常将其放在名为“/ types”的文件夹中），并创建内容declare module 'enzyme-adapter-react-16';（来自错误消息）。这基本上告诉typescript将导入的对象视为any类型（即没有类型检查）。
对于第二个错误，您可以将enzyme导入转换为any，然后调用configure。例如：(enzyme as any).configure({ adapter: new Adapter() });。如果tslint抱怨使用any，您可以让它忽略上面带有// tslint:disable-next-line:no-any评论的那一行。

完整代码：

import * as enzyme from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';

// tslint:disable-next-line:no-any
(enzyme as any).configure({ adapter: new Adapter() });

还好奇是出现了这个错误的原因。我以前不需要适配器，为什么现在呢？

这是版本3的enzyme项目的新设计选择 - 您可以阅读有关版本2.x here的主要更改的详细信息。我认为适配器的方法是使处理不同版本的反应的不同要求更容易和更一致。

Answer 2

您正在使用React 16+并已弹出您的应用添加以下软件包：

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

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

然后你必须通过创建文件src / setupTests.js来设置Enzyme。加上这个：

/src/setupTests.js

最后你必须修改package.json - 将"setupFiles": [ "<rootDir>/config/polyfills.js", "<rootDir>/src/setupTests.js" ],添加到setupFiles数组：

modulo.descripcion

Amend setupFiles array

在： Before screenshot

在： After screenshot

我想我们都同意绿色是一种可爱的颜色!!

Answer 3

花了我太多时间解决。希望这可以帮助某人：

将Create-React-App 2.1.3与酶3.8.0，酶-适配器-反应16：1.7.1，酶对JSON 23.6.0一起使用

对我来说解决方案：

src / setupTests.js：

import Enzyme, { configure } from "enzyme";
const Adapter = require("enzyme-adapter-react-16");

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

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

然后说出您要使用酶和开玩笑测试的成分：

import React from "react";
import Enzyme from "enzyme";
import Component from "./component";

const { shallow } = Enzyme; //whatever you want to use here



test("component exists", () => {
  expect(Component).toBeDefined();
});

//这不是必需的，但仅仅是出于完整性考虑，没有其他配置发生：

package.json：

"jest": {
    "snapshotSerializers": ["enzyme-to-json/serializer"]
      }

Answer 4

我也已经在导入语句中用简单的错字在Windows上注意到了这个问题（在这里保存了我的意思）：

import Enzyme from 'Enzyme';

而不是

import Enzyme from 'enzyme';

Answer 5

您应该为打字稿添加其类型。您可以使用以下npm软件包：

npm i @types/enzyme-adapter-react-16 --save-dev

无法找到酶适配子反应-16的申报文件？

5 个答案: