使用Jest测试React组件样式时，外部SCSS文件样式未生效的原因

我有一个style.scss文件用于给TimeBlock组件编写样式，用Jest写单元测试检查组件样式时失败了，但换成内联样式测试就能通过。为什么单独文件导入的样式在测试里不生效？

TimeBlock.jsx 代码： #

import React from 'react';
import './style.scss';
const TimeBlock = ({id, activeState, onClick}) => {
  return (
    <div data-testid={id} onClick={onClick} className={`time-block ${activeState}`}/>
  )
}
export default TimeBlock;

style.scss 代码： #

.time-block {
  background: #FFFFFF;
  border: 1px solid #258381;
  box-sizing: border-box;
  border-radius: 4px;
  width: 64px;
  height: 24px;
}

TimeBlock.test.js 代码： #

import React from 'react';
import TimeBlock from './TimeBlock';
import { render } from '@testing-library/react';
import { screen } from '@testing-library/dom'
test('block is white', () => {
  const handleClick = jest.fn();
  render(<TimeBlock id={1} activeState={''} onClick={handleClick}/>);
  expect(screen.getByTestId('1')).toHaveStyle('background: #FFFFFF')
});

这个问题我之前也碰到过，本质是Jest默认不会处理CSS/SCSS这类样式文件，咱们一步步来拆解原因和解决办法：

为什么导入的样式不生效？ #

当你在组件里写import './style.scss'时，Jest根本不知道怎么解析SCSS文件——它默认只处理JavaScript/JSX。这个导入操作其实被Jest直接忽略了，样式完全没加载到测试环境的DOM里，自然toHaveStyle断言找不到对应的样式属性，测试就失败了。而内联样式是直接附着在DOM元素上的，测试时能直接读取到，所以能顺利通过。

解决办法 #

根据你的实际需求，有几种不同的方案可选：

方案1：模拟样式导入（快速解决，适合测试类名而非样式属性） #

如果你只是想确保组件正确应用了类名，不需要测试具体样式细节，可以用identity-obj-proxy来模拟样式模块：

1. 安装依赖：

npm install --save-dev identity-obj-proxy

2. 在Jest配置文件（jest.config.js或者package.json里的jest字段）中添加规则：

moduleNameMapper: {
  '\\.scss$': 'identity-obj-proxy'
}

这样Jest会把SCSS文件的导入转换成空对象，不会报错，但注意这个方案不会加载实际样式，所以你没法用toHaveStyle测试样式属性，不过可以改成测试类名是否正确：

test('block has time-block class', () => {
  const handleClick = jest.fn();
  render(<TimeBlock id={1} activeState={''} onClick={handleClick}/>);
  expect(screen.getByTestId('1')).toHaveClass('time-block')
});

方案2：让Jest真正加载并应用SCSS样式（适合测试样式属性） #

如果你确实需要验证样式属性（比如背景色、尺寸），就得配置Jest来处理SCSS文件：

1. 安装必要的依赖：

npm install --save-dev jest-css-modules-transform sass

2. 在Jest配置里添加转换规则：

transform: {
  '\\.scss$': 'jest-css-modules-transform'
}

这个工具会把SCSS编译成CSS并注入到测试环境的DOM中，这样你的toHaveStyle断言就能正常工作了。

方案3：调整测试策略（更符合单元测试最佳实践） #

其实单元测试的核心是验证组件的行为和结构，而非具体的样式细节。样式相关的测试更适合交给E2E测试（比如Cypress）或者视觉回归测试（比如Loki）。你可以把测试改成验证类名是否存在，或者组件的交互逻辑，这样既避免了样式加载的问题，也更贴合单元测试的定位。

内容的提问来源于stack exchange，提问作者Eric