在前端开发中，CSS Modules 是一个很好的解决方案，使得我们在编写 CSS 样式时可以拥有更好的可重用性和可维护性。但是，在使用 Jest 进行单元测试时，我们可能会遇到一些问题，因为 CSS Modules 会被打包成一个唯一的类名，而 Jest 在执行测试时无法识别这些类名。
在本文中，我们将介绍如何在 Jest 测试中 Mock CSS Modules，以便更好地测试我们的前端代码。
什么是 CSS Modules？
CSS Modules 是一个让你可以轻松定义局部作用域 CSS 类名的解决方案。它会将 CSS 文件中的类名映射为一个唯一的字符串，并将其作为模块的输出。
通过使用 CSS Modules，我们可以为每个组件定义唯一的类名，这样可以防止全局 CSS 类名冲突。
为什么需要 Mock CSS Modules？
在使用 Jest 进行单元测试时，我们可能需要模拟 CSS Modules。因为在测试中，我们需要保证每个组件的样式都是正确的，但是由于 CSS Modules 会将类名映射为一个唯一的字符串，Jest 在执行测试时无法识别这些类名，从而导致测试失败。
因此，我们需要 Mock CSS Modules，使得 Jest 在执行测试时可以正确地识别类名。
如何 Mock CSS Modules？
在 Jest 测试中 Mock CSS Modules ，需要使用 jest.mock() 函数来模拟 CSS Modules。
首先，我们需要创建一个 Mock CSS Modules 文件，如下所示：
// __mocks__/styleMock.js
module.exports = {};这个文件会将所有的 CSS 类名映射为一个空对象。接下来，我们需要在 Jest 配置文件中添加一个配置项，告诉 Jest 在测试中使用这个 Mock 文件：
-- -------------------- ---- -------
-- --------------
-------------- - -
-- ---
----------------- -
----------------- -----------------------------------
--
-- ---
--最后，我们可以在测试文件中使用这个 Mock 文件：
-- -------------------- ---- -------
-- --------------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
------ ------ ---- ----------------------
-------------------------------- -- -- --
------- ---------
-------- ----------
----
----------------- ---- -- -- -
----------- ----------- -- -- -
----- ------- - --------------- ----
----------------------------------
---
---在这个例子中，我们在测试文件中使用了 jest.mock() 函数来模拟 CSS Modules。我们将所有的类名映射为一个普通的对象，该对象中包含了我们需要测试的样式。
在测试文件中，我们使用了 shallow() 函数来浅渲染组件，然后使用 toMatchSnapshot() 函数来生成快照，并进行比较。
总结
在本文中，我们介绍了如何在 Jest 测试中 Mock CSS Modules，以便更好地测试我们的前端代码。通过使用 jest.mock() 函数来模拟 CSS Modules，我们可以防止测试时出现类名无法识别的问题。希望这篇文章能够帮助你更好地理解如何在 Jest 测试中使用 CSS Modules。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f98bc4f6b2d6eab3108db1