如何使用Jest和React Testing Library测试Sass编写的组件样式？

问题根源 #

你当前Jest配置中使用identity-obj-proxy代理了所有CSS/SCSS文件，该工具仅会返回类名映射对象保证导入不报错，不会真实编译样式并注入到测试运行的JSDOM环境中，因此window.getComputedStyle无法读取到类对应的样式规则，返回空值。

如果之前配置过jest-transform-scss不生效，大概率是没有删除identity-obj-proxy对样式文件的代理规则，moduleNameMapper的优先级高于transform，保留代理规则会导致样式转换不执行。

解决方案 #

方案1：实现真实样式校验（适合需要强校验样式的场景） #

1. 安装正确的样式转换工具：

npm install jest-transform-scss --save-dev

2. 修改jest.config.js配置：

• 删除moduleNameMapper中匹配.+\\.(css|scss)$的规则
• 在transform中新增SCSS转换规则，修改后核心配置如下：

module.exports = {
  roots: ['<rootDir>'],
  transform: {
    '\\.(js|jsx)?$': 'babel-jest',
    // 新增scss转换规则
    '^.+\\.(css|scss)$': 'jest-transform-scss'
  },
  testMatch: [
    '<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}',
  ],
  moduleFileExtensions: ['js', 'jsx', 'json', 'node'],
  testPathIgnorePatterns: ['/node_modules/', '/public/'],
  setupFilesAfterEnv: [
    '@testing-library/jest-dom/extend-expect',
  ],
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/config/jest/__mocks__/fileMock.js',
  },
};

3. 修正测试用例的语法错误：
   你之前使用toHaveStyle时多写了一个多余的右大括号，导致匹配失败，修正后如下：

it('deve ter a cor vermelho', () => {
  const { container } = render(dangerLabel);
  expect(container.firstElementChild).toHaveStyle(`
    background-color: rgb(231, 76, 60);
  `);
});

注意：JSDOM中读取的颜色值默认返回RGB格式，不要使用十六进制值做匹配

方案2：单元测试最佳实践（更推荐） #

单元测试核心是校验组件行为正确性，样式校验建议交给视觉回归测试工具（如Storybook Chromatic、Percy）实现。你已经完成了类名校验expect(container.firstChild).toHaveClass('-danger')，只要你的SCSS文件中.-danger选择器的样式编写正确，就可以保证组件样式符合预期，该方案测试执行速度更快、稳定性更高。

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