React 是一个流行的 JavaScript 库，用于构建交互式用户界面。在 React 中，组件是构建 Web 应用程序的基本单元，因此正确测试组件非常重要。
Enzyme 是 Facebook 推出的一个用于测试 React 组件的工具。它提供了各种测试功能，包括渲染、模拟用户交互和查找组件等。本文将介绍如何使用 Enzyme 来测试 React 组件中的输出格式。
安装 Enzyme
首先，我们需要安装 Enzyme。
使用 npm 安装 Enzyme：
npm install --save-dev enzyme enzyme-adapter-react-16
Enzyme 还需要一个适配器来与 React 一起使用。在这个例子中，我们将使用 React 16。需要安装适配器:
npm install --save-dev enzyme-adapter-react-16
然后在你的测试文件中进行配置：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });测试组件的 HTML 输出
在 Enzyme 中测试组件的 HTML 输出可以通过 Shallow Rendering API 来实现。 Shallow Rendering API 允许你仅渲染一个组件的浅层副本，而无需渲染整个子组件树。
在这个例子中，我们将测试一个简单的 React 组件来演示如何测试 HTML 输出。这个组件包含一个标题和一个按钮，点击按钮会在控制台上输出一段文字。
-- -------------------- ---- -------
------ ----- ---- --------
----- ------ - -- ----- ------- -- -- -
------- ---------------------------------
--
----- --------------- - -- ------------- -- -- -
-----
------ --------
------- ----------- --- ----------------------- --
------
--
------ ------- ----------------现在，我们可以使用 Enzyme 来测试这个组件的 HTML 输出。通过 shallow 函数可以创建一个组件的浅层副本，然后使用 find 函数查找组件标记的文本和属性，然后使用 text 函数获取标记的文本值。
import { shallow } from 'enzyme';
import OutputComponent from './OutputComponent';
it('renders output component with correct HTML structure', () => {
const wrapper = shallow(<OutputComponent />);
expect(wrapper.find('h1').text()).toEqual('My App');
expect(wrapper.find('button').text()).toEqual('Click me');
});测试组件的交互行为
现在我们已经测试了组件的 HTML 输出，下一步是测试组件的交互行为。为了测试这一点，我们可以使用 Enzyme 的 simulate 函数来模拟用户的事件。
在这个例子中，当用户单击按钮时，组件应显示一段文字并在控制台上输出一条消息。我们可以使用 Jest 的 console.log 实现此功能并在测试中验证该功能是否有效。
-- -------------------- ---- ------- ------ - ----- - ---- --------- ------ --------------- ---- -------------------- -------- - ------- ---- --- ------ -- --------- -- -- - ----------- - ---------- ----- ------- - ---------------------- ---- ----------------------------------------- ------------------------------------------------ --- ----------- ---
在这个测试中，我们在控制台上 Mock 了 console.log 函数，然后创建了一个组件的完整渲染副本，并使用 simulate 函数来模拟按钮的 click 事件。最后，我们验证 console.log 是否被调用正确的内容。
总结
使用 Enzyme 可以轻松测试 React 组件的 HTML 输出和交互行为。我们学习了如何使用 Enzyme 的 Shallow Rendering API 和 simulate 函数。测试 React 组件的过程可以在开发过程中加入单元测试，保证每一块 React 组件的代码的正确性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c7600968c7c53b077ecb6