找不到enzyme-adapter-react-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';

  （来自错误消息）。这基本上告诉打字稿将导入的对象视为

  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 的主要更改的详细信息。我认为适配器方法是为了让处理支持不同版本的 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"
],

之前：

之后：

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

Answer 3

我花了太长时间才解决。希望这对某人有帮助：

使用 Create-React-App 2.1.3 和酶 3.8.0、酶适配器-react-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 上注意到了这个问题，在我的导入语句中存在一个简单的拼写错误（linting 救了我）：

import Enzyme from 'Enzyme';

而不是

import Enzyme from 'enzyme';

Answer 6

npm i --save-dev enzyme enzyme-adapter-react-16 --force