简介
Enzyme 是一个流行的 React 的 JavaScript 测试实用工具，它可以帮助开发者测试 React 组件的行为和状态。除了测试组件的状态，Enzyme 还可以测试组件的 Props，这是组件的另一个重要的方面。本篇文章将详细介绍如何使用 Enzyme 进行 React 组件的 Props 测试。
安装 Enzyme
使用 Enzyme 进行 React 组件的 Props 测试前，需要先安装 Enzyme。可以通过 npm 包管理工具进行安装：
npm install --save-dev enzyme enzyme-adapter-react-16
或者使用 yarn，直接运行以下命令：
yarn add --dev enzyme enzyme-adapter-react-16
需要注意的是，Enzyme 需要在项目中注册 React 适配器，因此需要在测试文件中添加以下代码：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });测试 React 组件 Props
由于组件 Props 是外部传递进来的，很难通过直接访问组件实例的方式进行测试。Enzyme 提供了一套方便的 API，可以轻松地测试组件接收的各种 Props 中包含的值。下面介绍两种常用的测试 Props 的方法。
测试 Props 是否成功渲染
假设有一个组件 MyComponent，需要测试它是否成功接收了名为 name 的 Props 并正确渲染。为了测试 Props 是否被正确传递，需要使用 Enzyme 的 shallow 方法将组件渲染成一个简单的虚拟 DOM。然后使用 prop 方法检查 name Props 是否被正确渲染。如下所示：
import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';
it('renders the name prop', () => {
const wrapper = shallow(<MyComponent name="John" />);
expect(wrapper.find('.name').text()).toEqual('John');
});在上述代码中，我们首先使用 shallow 方法将 MyComponent 组件渲染成一个浅层的虚拟 DOM。然后使用 find 方法找到渲染后的 HTML 标记，再使用 text 方法来获取渲染后的文本内容。最后，使用 Jest 的 toEqual 方法检查 Props 的值是否符合预期。
模拟 Props 的变化
有时候需要测试 Props 变化后组件是否成功地响应了这些变化并进行重新渲染。可以使用 Enzyme 的 setProps 或 setPropsAsync 方法模拟 Props 的变化。这两个方法的区别在于后者的 Props 是异步设置的，因此需要使用 async/await。
以一个基本的组件 MyComponent 为例，它包含一个 name Props 和一个状态 isGood。当 isGood 状态设置为真时，组件应该返回 “Hello, John!” 文本内容，否则应该返回 “Hello, Stranger!”。下面是测试 Props 变化的示例代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- --------- ------ ----------- ---- ---------------- ----------- --- ------- ---- ---- ------ -- ------- ----- -- -- - ----- ------- - -------------------- ----------- ---- -------------------------------------- -------- ----- ------------------ ------- ----- --- -------------------------------------- ------------ ---
在上面的代码中，我们首先使用 shallow 方法将 MyComponent 组件渲染成一个浅层的虚拟 DOM。然后使用 setProps 方法将 isGood 状态设置为假。由于 setProps 方法是异步的，因此需要使用 async/await 来等待状态更新。最后，使用 Jest 的 toEqual 方法检查 Props 的值是否符合预期。
结论
Enzyme 提供了一套简便的 API，可以轻松地测试 React 组件的 Props。通过此文您了解了如何安装 Enzyme、测试 Props 是否成功渲染以及模拟 Props 变化。希望这篇文章可以帮助您更好地测试 React 组件的 Props，并提高代码质量和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672022542e7021665e00dc69