Jest 测试 React 组件时遇到的样式问题及解决方案

在 React 开发中，为了保证代码质量和可维护性，测试是不可或缺的一环。而 Jest 是目前 React 生态圈中比较流行的单元测试框架。但是，在使用 Jest 测试 React 组件时，由于样式文件需要在组件代码中引入，可能会遇到样式不被正确加载的问题。本文将介绍遇到这个问题的原因，并提供相应的解决方案。

问题描述

在 Jest 测试 React 组件时，我们有时会遇到样式文件无法被正确加载的情况。举个例子，我们有如下的组件代码：

import React from 'react';
import './Button.css';

function Button(props) {
  return <button className="Button" {...props} />;
}

export default Button;

然后我们使用 Jest 编写如下的测试代码：

import React from 'react';
import { render } from '@testing-library/react';
import Button from './Button';

test('renders a button', () => {
  const { getByRole } = render(<Button />);
  const button = getByRole('button');
  expect(button).toBeInTheDocument();
  expect(button).toHaveClass('Button'); // 验证样式是否正确加载
});

然而，运行测试后，我们发现样式文件无法被加载，使得我们的测试失败：

● renders a button

  expect(element).toHaveClass(expected)

  Expected the element to have class:
    Button
  Received:
    <button />

问题原因

这个问题的原因在于在 Jest 的环境下，由于没有在一个实际的浏览器环境中进行样式加载和解析，所以 CSS 的样式会被 Jest 所忽略。这也是为什么样式不被正确加载的原因。

解决方案

解决这个问题的方法有很多，但是最常用也最推荐的方法是使用 identity-obj-proxy 这个库来 Mock 样式文件。

identity-obj-proxy 是一个通用的 Mock，可以在 Jest 的环境下被使用。它会自动将样式文件中的 CSS 样式对象转换为一个 JavaScript 对象，并将对象的键映射为它们自身的值。这对于在测试中使用样式非常有用，因为它允许我们在测试中继续引用样式，而不是使用一些伪造的样式。

在实践中，我们只需要将每个样式文件替换为 identity-obj-proxy，在 Jest 的配置文件中添加以下内容：

module.exports = {
  moduleNameMapper: {
    '\\.(css|scss)$': 'identity-obj-proxy',
  },
};

这样，当样式文件被引入时，Jest 将返回一个自动创建的 Mock 对象，该对象包含了样式对象的所有键值对，这样测试代码就可以正常工作了。

下面是修改后的组件和测试代码：

import React from 'react';
import styles from './Button.module.css';

function Button(props) {
  return <button className={styles.Button} {...props} />;
}

export default Button;

import React from 'react';
import { render } from '@testing-library/react';
import Button from './Button';

test('renders a button', () => {
  const { getByRole } = render(<Button />);
  const button = getByRole('button');
  expect(button).toBeInTheDocument();
  expect(button).toHaveClass('Button');
});

总结

在本文中，我们介绍了在使用 Jest 测试 React 组件时遇到样式问题的原因，并介绍了如何使用 identity-obj-proxy 来解决这个问题。希望读者能够学到一些在使用 Jest 测试 React 组件时的技巧，并且能够采用最

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