Enzyme 的概述：设置、使用和测试
Enzyme 是一个快速且功能强大的 React 测试工具，它允许开发人员在测试组件时进行渲染和交互。Enzyme 提供了许多有用的函数和工具，用于对 React 组件进行浅层渲染及完整渲染，以及模拟用户交互以测试组件是否正常工作。
安装和设置 Enzyme
为了使用 Enzyme，您需要使用 npm 对其进行安装。为此，您可以在终端窗口中运行以下命令：
npm install --save-dev enzyme enzyme-adapter-react-16
安装完成后，您需要设置 Enzyme 以与 React v16+一起使用。您可以在测试文件中添加以下代码进行设置：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });使用 Enzyme
在了解如何测试 React 组件之前，让我们看一下 Enzyme 常用的方法和函数：
shallow()：用于浅层渲染 React 组件，并返回一个渲染结果的包装器对象。mount()：用于完整渲染 React 组件，并返回包含所有 DOM 元素的包装器对象。render()：类似于mount()，但仅渲染组件到静态 HTML，并返回包含 HTML 字符串的包装器对象。find()：用于查找包装器对象内的元素，并返回一个包含所有匹配元素的包装器对象。simulate()：用于模拟用户行为，例如单击、输入等。
下面是一个简单的例子，演示了如何使用 shallow() 方法进行浅层渲染：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- --------- ------ ------ ---- ----------- ------------ ------ ------ ---------- -- -- - ----- ------- - --------------- ---- ------------------------------------ ---
在这个例子中，我们首先从 enzyme 导入 shallow() 方法和要测试的 Button 组件。然后我们使用 shallow() 方法进行浅层渲染，并将其存储在一个名为 wrapper 的变量中。最后，我们使用 exists() 方法检查 wrapper 对象是否存在.
测试 React 组件
现在让我们来看一些更复杂的测试例子，这些例子模拟完整渲染和模拟用户输入。
完整渲染
为了完全渲染 React 组件，我们将使用 mount() 方法。这个方法将组件嵌套在一个 DOM 中，并返回一个包含所有 DOM 元素的包装器对象。这是一个例子，演示了如何在 React 中测试输入框：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ----- - ---- --------- ------ ----- ---- ---------- ----------- --------- ------ ------ ---------- -- -- - ----- ------- - ------------ ---- ------------------------------------ --- ----------- --------- ------ ---- - ------- -- -- - ----- ------- - ------------ ---------------- ---- --------------------------------------------------------- --- ----------- --------- ------ ------ ---- ---- ------- -- -- - ----- ------- - ------------ ---- ----------------------------------------------------- - ------- - ------ ------- - --- -------------------------------------------------------------------------- ---
在这个例子中，我们首先测试 Input 组件是否能够正确地渲染。然后，我们测试 Input 组件是否能够正确地呈现一个标签。最后，我们测试是否能够正确地更新输入框的值，以匹配用户的输入。
浅层渲染
如前所述，浅层渲染比完整渲染更快，因为它不需要呈现组件的所有子组件和 DOM 元素。这是一个例子，演示了如何在 React 中测试按钮：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- --------- ------ ------ ---- ----------- ------------ --------- ------ ------ ---------- -- -- - ----- ------- - --------------- ---- ------------------------------------ --- ------------ --------- ------ ------- ------ -- -- - ----- ------- - --------------------- ------------- ------------------------------------- ----- --- ------------ --------- ------ ---- ------- ---------- -- -- - ----- ------- - ---------- ----- ------- - --------------- ----------------------- ------------- -------------------------- ----------------------------------------- ---
在这个例子中，我们首先测试 Button 组件是否能够正确地渲染。然后，我们测试 Button 组件是否正确地呈现文本。最后，我们测试是否能够正确地触发 onClick 回调函数。
总结
Enzyme 是一个功能强大的 React 测试工具，用于模拟用户行为和测试组件。在安装和使用 Enzyme 前，请确保您已经安装了 npm，并对其及配置进行了设置。掌握了 Enzyme 基础知识之后，您现在已经可以为您的 React 代码编写自动化测试，并确保代码质量和稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6490fb0c48841e9894efc319