什么是Enzyme中的适配器？

Question

什么是Enzyme中的适配器？

14

有没有关于 enzyme 测试库中 adapter 目的的文档？

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

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

- Sai Ram

https://www.npmjs.com/package/enzyme-adapter-react-16 - SakoBu

我看了一下，他们只提到了如何安装以及应该安装哪个版本。 - Sai Ram

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Brian Adams · Accepted Answer

有关enzyme测试库中adapter的目的的任何文档都没有。最接近的解释是说"您需要安装与您使用的react版本（或其他UI组件库）相对应的适配器，以及enzyme"。文档主要只是解释如何配置adapter，并没有真正讨论它的目的。

什么是 Enzyme 中的适配器？

简短版

enzyme API在使用任何版本的React时都是相同的，但是React渲染和与所呈现内容交互的方式会根据React版本而有所不同。

adapter将基于React版本更改的任何内容抽象出来，因此核心的enzyme代码可以保持不变。

详细版

mount 和 shallow 都是从 enzyme 导出的。让我们关注 mount。

mount 是一个函数，只返回一个新的 ReactWrapper。

ReactWrapper 提供了熟悉的包装对象，其中包括 instance, setState, find 等。

所有这些功能的实现方式都是相同的，无论您使用的是哪个版本的React...但是，由于React本身在这些年里发生了变化，基于React版本的任何实现细节都会通过适配器进行抽象处理。通过调用getAdapter来检索适配器，第一次使用它是为了验证传递给mount的节点, 然后创建renderer以实际呈现这些节点。

对于调用createRenderer的enzyme-adapter-react-16.3，它会路由到this.createMountRenderer，在createMountRenderer中，您可以看到熟悉的ReactDOM.render调用，其中使用React v16语法呈现传递的内容。请注意，和占位符应保留。

在ReactWrapper.js中搜索getAdapter，可以发现在使用mount时，adapter用于抽象出根据React版本而变化的功能。

在ShallowWrapper.js中搜索getAdapter，可以发现在使用shallow时，adapter用于抽象出根据React版本而变化的功能。