reactjs - enzyme 中的接头是什么

Question

有关enzyme 测试库中adapter 用途的任何文档。

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

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

Answer 1

Any documentation on what's the purpose of adapter in enzyme testing library.

最接近的是 "You will need to install enzyme along with an Adapter corresponding to the version of react (or other UI Component library) you are using" .

文档主要只是解释如何配置适配器，并没有真正讨论其用途。

<小时/>

what is adapter in enzyme

<小时/>

简短版本

无论您使用的 React 版本如何，enzyme API 都是相同的，但 React 如何呈现以及与呈现的内容交互根据 React 版本而变化。

适配器抽象出基于React版本的任何更改，因此核心enzyme代码可以保持不变。

<小时/>

详细版本

mount 和 shallow 均为 exported from enzyme 。让我们重点关注安装。

mount 是一个函数 just returns a new ReactWrapper .

ReactWrapper 提供熟悉的包装器对象 instance , setState , find等

无论您使用哪个版本的 React，所有这些函数的实现都是相同的...

...但是由于 React 本身多年来已经发生了变化，任何基于 React 版本更改的实现细节都被抽象化了一个适配器。

通过调用 getAdapter 检索适配器第一次使用是validate the nodes passed to mount ，然后到create the renderer to actually render the nodes .

对于调用createRenderer的enzyme-adapter-react-16.3获取routed to this.createMountRenderer在 createMountRenderer 中您可以看到 the familiar ReactDOM.render call where what you passed is actually rendered using React v16 syntax .

<小时/>

在ReactWrapper.js内搜索getAdapter随处可见，适配器用于抽象出在使用mount时根据React版本更改的功能...

...并在 ShallowWrapper.js 内搜索 getAdapter到处都显示 adapter 用于抽象出在使用 shallow 时根据 React 版本更改的功能。