React 组件单元测试进阶 — 使用 Enzyme，react-test-renderer，Tape-JavaScript中文网-JavaScript教程资源分享门户

React 组件单元测试进阶 — 使用 Enzyme，react-test-renderer，Tape

React 是一个非常受欢迎的前端框架，许多团队和开发者都选择使用它来构建他们的应用。在这个过程中，单元测试是一个非常重要的步骤，它可以确保代码在发布到生产环境之前是正确的，并且可以提高开发速度。

在这篇文章中，我们将会探讨在 React 中进行单元测试的几种方法，包括使用 Enzyme，react-test-renderer 和 Tape 库。我们将重点介绍 Enzyme，这是一个很流行的测试库，它可以帮助我们更容易地编写和运行测试用例。

安装 Enzyme

首先，我们需要安装 Enzyme。我们可以使用 npm 或者 yarn 来安装它：

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

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

其中 enzyme-adapter-react-16 是 Enzyme 用来适配 React 16.x 版本的库。

配置 Enzyme

接着，我们需要在项目中配置 Enzyme。我们需要在 src/setupTests.js 文件里编写配置代码：

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

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

这段代码会告诉 Enzyme 使用 react-test-renderer 来渲染 React 组件，以便我们在测试中使用。

编写测试

我们编写测试用例的时候，需要关注三个方面：

测试什么
输入什么
预期什么输出

下面是一个简单的示例测试用例：

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

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

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

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

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

这个测试用例的意思是测试按钮组件是否可以正确地渲染出文本，并且在点击按钮后是否可以正确地调用传入的 onClick 回调函数。

我们使用 shallow 方法来渲染组件。这个方法是 Enzyme 提供的，它可以按组件的结构层层递进地渲染出虚拟 DOM 树。我们可以使用 find 方法来查找特定的元素，然后使用 text 属性来获取元素的文本内容。另外，我们还可以使用 simulate 方法来模拟用户事件。

在这个示例中，我们还使用了 Jest 的 fn 函数来创建一个简单的 mock 函数。

使用 react-test-renderer

在上面的示例中，我们使用了 Enzyme 中的 shallow 方法来渲染组件。但是，如果我们想要更加直接地测试组件的渲染结果，我们可以使用 React 官方提供的 react-test-renderer 库。

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

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

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

在这个例子中，我们用 TestRenderer.create 方法来创建一个测试用例。之后，我们可以使用 toJSON 方法来获取渲染结果的快照，并使用 Jest 的 toMatchSnapshot 方法来检查快照是否与预期相符。

使用 Tape

除了使用 Enzyme 和 react-test-renderer，还有一个很流行的测试库叫做 Tape。Tape 是一个小巧的库，它的 API 简洁且易于学习。

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

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

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

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

这个示例中，我们使用 Tape 的 test 方法来组织测试用例，使用 equal 和 pass 方法来进行断言。这个示例测试了一个简单的按钮组件，但是 Tape 可以用来测试任何类型的 JavaScript 代码。

总结

在本文中，我们已经介绍了几种用于 React 单元测试的方法。我们介绍了 Enzyme 和 react-test-renderer 这两个流行的测试库，并展示了它们的使用方法和示例代码。另外，我们还介绍了 Tape 这个轻量级的测试库。希望这个文章对于 React 单元测试的初学者有所帮助。

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/64565cc3968c7c53b0986fe7