什么是酶中的适配器

what is adapter in enzyme

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

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

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

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"

文档大多只是解释如何配置 adapter,并没有真正谈论它的用途。


what is adapter in enzyme


短版

无论您使用的 React 的版本如何,enzyme API 都是相同的,但是 React 呈现的方式以及与呈现内容的交互方式会发生变化,具体取决于React 版本。

adapter 抽象掉了基于 React 版本的任何更改,因此核心 enzyme 代码可以保持不变。


详细版

mountshallow都是exported from enzyme。让我们关注 mount.

mountjust returns a new ReactWrapper.

的函数

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

无论您使用哪个 React 版本,所有这些功能的实现都是相同的...

...但是因为 React 本身多年来发生了变化 任何基于 React 版本 发生变化的实现细节都被抽象化了适配器。

通过调用 getAdapter and the first time it is used is to validate the nodes passed to mount, and then to create the renderer to actually render the nodes 检索适配器。

对于 enzyme-adapter-react-16.3 调用 createRenderer gets routed to this.createMountRenderer and within createMountRenderer you can see the familiar ReactDOM.render call where what you passed is actually rendered using React v16 syntax


ReactWrapper.js 中搜索 getAdapter 显示 adapter 用于抽象掉基于 React 版本而变化的功能,而使用 mount...

...并在 ShallowWrapper.js 中搜索 getAdapter 显示 adapter 用于抽象掉使用 React 版本时根据 React 版本更改的功能=21=].