注：本文假设读者已经具备一定的前端开发知识，熟悉 React 和 enzyme 测试框架。
enzyme 是一个针对 React 的测试工具，但事实上通过一些技巧，我们可以将其用于测试非 React 应用及其组件。
技巧
在使用 enzyme 测试非 React 应用之前，需要掌握以下技巧：
- 用 enzyme 的 shallow API 代替 DOM API。
- 用 React.createElement() 方法创建虚拟 DOM，然后用 enzyme 的 mount API 进行渲染。
- 使用 enzyme 的实用工具方法（Utility Methods）模拟事件和操作 DOM。
接下来我们通过一个实例来说明这些技巧的具体使用。
假设我们有一个非 React 应用，其中包含一个按钮组件，代码如下所示：
<div id="myApp"> <button id="myButton">Click me!</button> </div>
用 shallow API 替代 DOM API
首先，我们用 shallow API 替换掉 DOM API 来测试按钮是否存在：
import { shallow } from 'enzyme';
describe('MyApp', () => {
it('contains a button', () => {
const wrapper = shallow('<div id="myApp"><button id="myButton">Click me!</button></div>');
expect(wrapper.find('#myButton')).toHaveLength(1);
});
});我们使用了 shallow() 方法来创建一个包装器（Wrapper），用于模拟 DOM 的浅渲染。然后我们使用 find() 方法查找包含 ID 为 “myButton” 的元素，通过 toHaveLength() 方法对其进行断言。如果能够找到一个带有 ID “myButton”的元素，则原定目标已经成功。
用 React.createElement() 创建虚拟 DOM
下面，我们将用 React.createElement() 方法创建虚拟 DOM，然后用 enzyme 的 mount API 进行渲染。再检查按钮是否存在：
// www.javascriptcn.com code example
import React from 'react';
import { mount } from 'enzyme';
describe('MyApp', () => {
it('contains a button', () => {
const wrapper = mount(
React.createElement('div', { id: 'myApp' },
React.createElement('button', { id: 'myButton' }, 'Click me!')
)
);
expect(wrapper.find('#myButton')).toHaveLength(1);
});
});在这个示例中，我们使用 React.createElement() 方法来创建一个类似于“myApp” 块的虚拟 DOM 元素，然后将其渲染到一个虚拟 DOM 上。
使用 enzyme 的实用工具方法进行事件和 DOM 操作的模拟
最后，我们将使用 enzyme 的实用工具方法模拟用户交互。例如，我们将在点击按钮时设置一个新的文本值。
// www.javascriptcn.com code example
import React from 'react';
import { mount } from 'enzyme';
describe('MyApp', () => {
it('updates text when button is clicked', () => {
const wrapper = mount(
React.createElement('div', { id: 'myApp' },
React.createElement('button', { id: 'myButton' }, 'Click me!'),
React.createElement('div', { id: 'myText' }, 'Initial text')
)
);
const button = wrapper.find('#myButton');
button.simulate('click');
const text = wrapper.find('#myText');
expect(text.text()).toBe('New text');
});
});在这个示例中，我们模拟了一个点击事件并将一个新文本值添加到页面。
深度和学习指导意义
本文中，我们演示了如何使用 enzyme 测试非 React 应用和组件，并探讨了一些有用的技巧。
尽管这些技术不是针对 react 应用的，但它们仍然非常有用，因为它们允许我们对任何下层应用程序使用测试代码。这大大增加了我们测试代码的可用性，并且可以使我们更好地了解我们的代码库。
如果你想深入了解 Enzyme 的用法和原理，推荐阅读官方文档，并结合 React 官方文档一起学习，可以让您更好地了解 React 编程的本质和相关开发领域内的最新趋势，加速您的职业发展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67ba7969306f20b3a693d9e2