介绍
在使用 React 进行开发时，测试是十分必要的部分之一，但随着应用的复杂度增加，测试变得越来越困难和耗时。在此背景下，enzyme 库提供了一组用于测试 React 组件的测试工具。在这组工具中，enzyme-adapter-react-14 是一个适用于 React 0.13.x 和 0.14.x 版本的适配器，允许我们轻松地在这些版本中运行解耦的测试。
安装
在安装 enzyme-adapter-react-14 之前，需要首先安装 enzyme。
通过 npm 安装：
--- ------- ---------- ------
在安装 enzyme 后，再安装 enzyme-adapter-react-14：
--- ------- ---------- -----------------------
配置
接下来，需要进行适配器的配置。在测试文件的头部加入以下配置代码：
-- ----------------- ------ - --------- - ---- --------- ------ ------- ---- -------------------------- ----------- -------- --- --------- ---
以上代码中 configure 函数，它会改变 enzyme 的默认设置，设置 adapter 属性，告诉 enzyme 使用 enzyme-adapter-react-14 适配器。
确保在测试文件夹中创建 setupTests.js 文件，并且能够从测试文件中访问到它。
使用
现在已经配置好了 enzyme-adapter-react-14，我们可以在测试文件中编写测试用例了。
渲染组件
首先，我们需要渲染一个组件。下面是一个 React 组件定义：
-------- ---------- ---- -- - ------ ---------- ------------- -
我们可以使用以下代码渲染该组件：
------ - ------- - ---- --------- ------ -------- ---- ------------- ----------- - ---------- -- -- - ----- ------- - ----------------- ------------ ---- ---------------------------------------- --------- ---
shallow 方法会渲染组件，并返回一个包装器(wrapper)，它可以用来查询渲染之后的输出。在这个例子中，我们查询了渲染之后的结果，检查它是否包含 Hello, World!。
模拟事件
接下来，我们可以使用 simulate 方法来模拟用户事件。这是一个点击按钮的例子：
------ - ----- - ---- --------- ------ ------- ---- ------------ -------------- --- ------- ---- --- ------ -- --------- -- -- - ----- ------- - -------------- ---- --------------------------------------------------- ----------------------------------------- --------------------------------------------------- ---
在这个例子中，我们使用 mount 方法来渲染 Counter 组件。在渲染之后，我们查询 .count 元素是否显示 0，然后模拟点击按钮。最后，我们再次查询 .count 元素是否显示了 1。
快照测试
最后，我们可以使用 toMatchSnapshot 方法来进行快照测试。这个方法会将组件渲染为字符串并与之前的快照进行比较，如果它们匹配，则测试通过。
------ - ------- - ---- --------- ------ -------- ---- ------------- ----------- --- ---------- -- -- - ----- ------- - ----------------- ------------ ---- ---------------------------------- ---
这个测试用例与第一个例子有些相似，但是这个例子使用了 toMatchSnapshot 方法，而不是查询渲染的文本内容。当这个测试首次运行时，toMatchSnapshot 方法会创建一个新的快照文件。当测试再次运行时，它会将当前的快照与该文件进行比较。
总结
enzyme-adapter-react-14 提供了一些适用于 React 0.13.x 和 0.14.x 版本的适配器。简单的介绍了如何配置和使用 enzyme-adapter-react-14，以及它的几个主要特性，包括渲染组件，模拟事件和快照测试。这些工具可以大幅度提高测试效率，同时帮助我们编写更健壮的代码。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f16451a403f2923b035c351