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

Could not find declaration file for enzyme-adapter-react-16?

提问by langkilde

I've been using Enzyme to test components in my React application for some time. After updating my packages for the first time in a few weeks I've started getting an error from my tests.

一段时间以来，我一直在使用 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

I proceed to install 'enzyme-adapter-react-16'as described in the link and add the following lines to my test file:

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

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

However, as my application is written in TypeScript, I now run into two new problems.

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

To clarify the images the first error, TS7016, is that there aren't any types for enzyme-adapter-react-16, and the second error, TS2339, says that enzymedoes not have the property configure.

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

I'm relatively new to TypeScript so I need some help. I've tried to install types for enzyme-adapter-react-16but those do not appear to exist.

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

Should I attempt to add them myself, or is there some way I can avoid this problem all together?

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

Also curious what made this error appear. I didn't need an Adapter before, why now?

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

回答by Jono Job

Should I attempt to add them myself, or is there some way I can avoid this problem all together?

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

I believe you are correct that there are currently no types for enzyme-adapter-react-16- it's pretty new, so it would seem that no one has created any yet.

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

You can create them yourself, and if you thought they were well defined, you could potentially contribute them to DefinitelyTypedfor others to use. To "avoid" the issue, you can get TypeScript to ignore the fact that it has no type information.

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

To ignore the type errors:

要忽略类型错误：

• For the first error, the error message tries to help with the "add a new declaration (.d.ts) file ...". So, you could create a file (I usually put it in a folder called "/types") called something like enzymeAdapter.d.ts, and make the contents declare module 'enzyme-adapter-react-16';(from the error message). This basically tells typescript to just treat the imported object as anytype (ie. no type checking).

• For the second error, you can cast the enzymeimport to any, then call configure. For example: (enzyme as any).configure({ adapter: new Adapter() });. If tslint complains about using any, you can get it to ignore just that line with a // tslint:disable-next-line:no-anycomment above.

• 对于第一个错误，错误消息试图帮助“添加新声明 (.d.ts) 文件...”。所以，你可以创建一个文件（我通常把它放在一个名为“/types”的文件夹中），名为enzymeAdapter.d.ts，并制作内容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上面带有注释的那一行。

Full code:

完整代码：

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() });

Also curious what made this error appear. I didn't need an Adapter before, why now?

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

This is a new design choice from the enzymeproject for version 3 - you can read details about the major changes from version 2.x here. I think the adapter approach is to make handling the different requirements for supporting different versions of react easier and more consistent.

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

回答by Anas

It you are using React 16+ and have ejected your app add the following packages:

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

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

Then you have to set up Enzyme by creating the file src/setupTests.js. Add this:

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

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

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

Finally you have to amend the package.json - add /src/setupTests.jsto the setupFiles array:

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

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

Amend setupFiles array

修改 setupFiles 数组

Before: Before screenshot

之前： 截图之前

After: After screenshot

之后： 截图之后

I think we can all agree that green is a lovely colour!!

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

回答by Oliver

Took me way too long to solve. Hope this helps someone:

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

Using Create-React-App 2.1.3 with enzyme 3.8.0, enzyme-adapter-react-16: 1.7.1, enzyme-to-json 23.6.0

使用 Create-React-App 2.1.3 和酶 3.8.0，酶适配器反应 16：1.7.1，酶到 json 23.6.0

Solution for me:

我的解决方案：

src/setupTests.js :

src/setupTests.js ：

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

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

then in say component you want to test w/ enzyme & jest:

然后在你想用酶和笑话测试的组件中：

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();
});

//this isn't necessary, but just for completeness sake -- no other config is happening:

//这不是必需的，但只是为了完整起见——没有其他配置发生：

package.json:

包.json：

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

回答by Jeff Pirie

I have also noted this issue on windows with a simple typo in my import statement (linting saved me here):

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

import Enzyme from 'Enzyme';

rather than

而不是

import Enzyme from 'enzyme';