如何使用 Enzyme 和 Jest 测试 React 组件-JavaScript中文网-JavaScript教程资源分享门户

在今天的前端开发中，测试是重要的一环。虽然可以选择使用不同的测试库，但在社区中，Jest 和 Enzyme 是最受欢迎的 React 测试工具。（注意：Jest 是 JavaScript 测试框架，Enzyme 是 React 测试工具，需要用 Jest 或其他 JavaScript 测试框架配合使用）。在本文中，我们将探讨如何使用 Jest 和 Enzyme 测试 React 组件。

安装 Jest 和 Enzyme

在开始测试之前，需要先安装 Jest 和 Enzyme。可以使用 npm 或 yarn 进行安装：

npm install --save-dev jest enzyme react-addons-test-utils enzyme-adapter-react-16

或

yarn add --dev jest enzyme react-addons-test-utils enzyme-adapter-react-16

还需要一个名为 enzyme-to-json 的库来序列化 Enzyme 渲染器的输出。可以通过以下命令进行安装：

npm install --save-dev enzyme-to-json

或

yarn add --dev enzyme-to-json

编写测试

现在，我们可以使用 Jest 和 Enzyme 编写测试了。下面是一个使用 Enzyme 和 Jest 测试组件的示例。我们假设有一个组件名为 Button：

import React from 'react';

const Button = ({ children, onClick }) => (
  <button onClick={onClick}>{children}</button>
);

export default Button;

现在，我们需要测试这个组件的渲染以及按钮是否被点击。首先，我们要创建一个名为 __tests__ 的文件夹，然后在里面创建一个名为 Button.test.js 的文件。

在单元测试文件中，我们首先需要导入需要测试的组件以及 Enzyme 和 enzyme-to-json 库：

import React from 'react';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
import Button from '../Button';

接下来，我们可以编写测试用例。在 Jest 中，可以使用 describe 和 it 来编写测试用例：

-- -------------------- ---- -------
---------------- ----------- -- -- -
  ----------- ----------- -- -- -
    ----- ------- - --------------- ----------- -- -----------------
    ------------------------------------------
  ---

  ------------ ------- ---- --------- -- -- -
    ----- ------- - ----------
    ----- ------- - --------------- -------------------------------
    --------------------------
    -----------------------------------------
  ---
---

在这个测试用例中，我们首先测试组件的截图是否匹配我们的预期。我们使用 shallow 函数来创建 Enzyme 渲染器，这个函数会返回一个包含渲染出的 React 组件的浅渲染器。然后，我们使用 toJson 函数来序列化渲染器的输出，我们可以使用 toMatchSnapshot 函数来比较渲染器的输出和之前生成的快照。如果两者不匹配，则测试将失败。

接下来，我们测试按钮是否被正确地点击。在这个测试用例中，我们使用 jest.fn 来模拟 onClick 函数，并使用 simulate 函数来模拟按钮的点击。最后，我们使用 toHaveBeenCalledTimes 函数来检查 onClick 函数是否正确地被调用。如果函数被调用一次，则测试通过，否则测试将失败。

结论

在本文中，我们探讨了如何使用 Enzyme 和 Jest 测试 React 组件，以及如何编写测试用例来测试组件的渲染以及交互行为。如果你要开始编写测试，这篇文章应该会提供一个好的初始指导。记住，在编写测试时，要注意代码的可读性和可维护性，这将有助于保证测试代码的有效性和可靠性！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/66fb0a8b4471362601552f56