在前端开发中，我们经常使用 React 来构建网页的用户界面。为了保证代码的质量和稳定性，我们通常会使用测试工具来进行组件的单元测试。Enzyme 是一个常用的 React 测试工具之一，它能够帮助我们方便地对组件进行测试。
当我们测试组件时，很有可能组件中的类名是动态生成的，例如根据用户输入的不同内容来改变组件的样式。这时，我们就需要使用 Enzyme 来测试组件的动态 ClassName。下面，让我们来了解如何做到这一点。
Enzyme 的基本使用
在进行测试前，我们需要安装 Enzyme 和相关的测试库。在本文中，我们将使用 Jest 来进行测试。下面，我们来安装所需的包：
--- ------- ------ ----------------------- ------------------- ----------- --
接着，我们需要在项目中创建一个测试的配置文件。在项目根目录下创建一个 jest.config.js 文件，输入以下内容：
-------------- - -
------------------- -
--------------
--
-------------------- -
----------------------------
--
---------------- ---------
----------------------- -
-------------- ----------
--
--这里使用了 Jest 的一些特性，例如 setupFilesAfterEnv 和 snapshotSerializers，同时也指定了 Enzyme 的适配器，这里我们使用的是 react16。
测试动态 ClassName 的方式
一般来说，组件的 ClassName 是根据 props 生成的。因此，我们可以使用 Jest 的 snapshot 功能来测试组件中的 ClassName。在组件的测试用例中，我们可以使用类似如下的代码来测试动态 ClassName：
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
----------- --------- ---- ------- ------- -- -- -
----- ------- - -------------------- ----
----------------------------------
---
---------- ------ --------- ----------- ----- -- ------- -- -- -
----- ----- - - ----------- ---- --
----- ------- - -------------------- ---------- ----
----------------------------------
---
---在这里，我们使用了 Jest 的 toMatchSnapshot 方法来生成我们的快照。快照的生成方式为，将组件渲染为一段字符串，然后将这段字符串和预期的结果保存到一个文件中。之后，每当我们运行测试时，Jest 就会将该组件重新渲染，然后将新的渲染结果与之前的快照进行对比。如果两者不同，测试就会失败。
在上述代码中，我们定义了一个 props 变量，它包含了一个名为 isDisabled 的属性。这个属性将用来为组件动态生成 ClassName。我们可以通过2个例子来展示：
--- ---------------- --- ---- -------------------------------------- - - --------- - ------ ------ ------ ------ --- --------------- --- ---- ------------------------ ----------- ------ ------ ------
在上面的代码中，我们使用了一个三元表达式来判断 isDisabled 变量是否为真。如果为真，就会给组件添加一个 disabled 的类名。在测试代码中，我们传入了一个 isDisabled 属性为 true 的 props 对象，然后生成了快照。当我们传入其他不同的 props 时，组件的 ClassName 就会改变。当我们运行 npm test 时，Jest 就会自动生成组件的新快照，并将其与之前的快照进行比较，然后输出测试结果。
总结
在本文中，我们介绍了如何使用 Enzyme 和 Jest 来测试组件的动态 ClassName。我们学习了如何设置测试环境，并使用 Jest 的快照功能来测试组件的 ClassName。这是一个非常基础的测试用例，但希望通过本文的介绍，你已经可以基于此进行更多复杂的测试了。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6538ef9a7d4982a6eb21c87d