在 React 项目中，我们通常会使用 Jest 来进行单元测试，而测试中会涉及到对 JSX 进行测试。然而，很多人会遇到这样一个问题：在 Jest 中测试 JSX 时，引入的 CSS 样式并不起作用。为什么会这样？本文将为大家解答这个问题。
原因解析
在 React 项目中，我们通常使用 Webpack 来打包我们的代码。而在打包过程中，Webpack 会把 CSS 文件转换成一段 JS 代码，通过创建 style 标签插入到 HTML 文件上。而当我们在 Jest 中测试 JSX 时，测试代码并没有像在浏览器中一样去执行这些 JS 代码，也就是说这些 CSS 样式并没有被生效。
解决方案
要解决这个问题，我们需要在 Jest 中引入一个叫做 identity-obj-proxy 的模块。这个模块将 CSS 样式文件转换成一个对象，使得在 Jest 测试时能够正确地获取到样式。
以下是一个使用 identity-obj-proxy 的示例：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- --------- ------ ------ ---- ----------- ------ ------ ---- ---------------------- -- -- ------------------ -------------------------------- -- -- -- ------------------------------------------------ ----------- ----- -------- - ----------------------------------- ---- -- - -------- - ---- ------ ---- -- --- -- ---- ---------------- ----------- -- -- - ------------ -- -- - ----- ------- - ---------- ----- ------ - --------------- ----------------------- ------------- ------------------------- ----------------------------------- --- ---展开代码
在这个示例中，我们使用了 jest.mock 方法将 Button.module.css 文件转换成一个对象，并对样式文件进行了 mock。
总结
在测试 JSX 时，我们需要确保样式也能够被正确地渲染出来，否则会影响测试结果。通过引入 identity-obj-proxy 模块，我们可以在 Jest 中正确地获取到样式文件，并使得代码能够正确地工作。希望这篇文章能够帮助大家更好地进行 React 项目的单元测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/659e2f22add4f0e0ff73d982
