找不到酶适配器反应 16 的声明文件？

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 没有属性 configure。

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

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

也很好奇是什么导致了这个错误出现。我以前不需要适配器，为什么现在？

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 的主要更改的详细信息。我认为适配器方法是为了更容易和更一致地处理支持不同版本的 React 的不同要求。

Answer 2

如果您使用的是 React 16+ 并已弹出您的应用，请添加以下包：

yarn add enzyme react-test-renderer enzyme-adapter-react-16 --dev

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

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

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

最后你必须修改 package.json - 将 /src/setupTests.js 添加到 setupFiles 数组中：

"setupFiles": [
  "<rootDir>/config/polyfills.js",
  "<rootDir>/src/setupTests.js"
],

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";
import Adapter from "enzyme-adapter-react-16"


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

你应该为打字稿添加它的类型。你可以使用这个 npm 包：

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

Answer 5

我还在 windows 上注意到了这个问题，在我的 import 语句中有一个简单的错字（linting 在这里救了我）：

import Enzyme from 'Enzyme';

而不是

import Enzyme from 'enzyme';