找不到酶适配器反应-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)文件...".因此,您可以创建一个文件(我通常把它放在一个名为"/ types"的文件夹中),称为类似的东西enzymeAdapter.d.ts,然后制作内容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() });

还好奇是出现这个错误的原因.我之前不需要适配器,为什么现在呢？

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

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"
],

修改setupFiles数组

之前: 截图前

之后: 截图后

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

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

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

包.json：

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