为什么 Jest 在测试 JSX 中引入的 CSS 不起作用？

在 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 的示例：

import React from 'react';
import { shallow } from 'enzyme';
import Button from './Button';
import styles from './Button.module.css';

// 引入 identity-obj-proxy
jest.mock('./Button.module.css', () => ({
  ...require.requireActual('./Button.module.css'),
  __esModule: true,
  default: { ...Object.keys(styles).reduce((obj, key) => {
    obj[key] = key;
    return obj;
  }, {}) },
}));

describe('Button Component', () => {
  it('测试按钮点击', () => {
    const clickFn = jest.fn();
    const button = shallow(<Button onClick={clickFn}>Click me</Button>);

    button.simulate('click');

    expect(clickFn).toHaveBeenCalled();
  });
});

在这个示例中，我们使用了 jest.mock 方法将 Button.module.css 文件转换成一个对象，并对样式文件进行了 mock。

总结

在测试 JSX 时，我们需要确保样式也能够被正确地渲染出来，否则会影响测试结果。通过引入 identity-obj-proxy 模块，我们可以在 Jest 中正确地获取到样式文件，并使得代码能够正确地工作。希望这篇文章能够帮助大家更好地进行 React 项目的单元测试。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659e2f22add4f0e0ff73d982