如何使用Enzyme/React测试组件className对应的CSS样式？

我来帮你搞定这个React组件样式测试的难题，分两部分解决你的困扰：先搞定组件完全加载的问题，再教你怎么测试类对应的CSS样式。

一、先解决组件只返回<body></body>的问题 #

你提到组件只输出空的<body>标签，大概率是测试环境没正确渲染组件，或者样式文件没被处理导致组件无法正常挂载。试试这几个步骤：

• 用mount替代shallow渲染组件：shallow只会渲染组件的第一层结构，不会完全挂载到DOM；而mount会完整渲染组件并挂载，能让你看到真实的DOM结构。示例代码：

  import { mount } from 'enzyme';
  import App from './App';
  
  describe('App component', () => {
    it('renders fully with all elements', () => {
      const wrapper = mount(<App />);
      console.log(wrapper.html()); // 这里应该能输出包含.App-header的完整DOM了
    });
  });
  

• 配置Jest处理样式文件：Jest默认不会解析CSS/SCSS文件，需要在配置里处理样式的加载。如果是普通CSS，可配置mock；如果用CSS Modules，推荐用identity-obj-proxy：
  1. 安装依赖：npm install identity-obj-proxy --save-dev
  2. 在jest.config.js里添加配置：

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

二、测试类对应的CSS样式 #

当组件能正常渲染后，你可以用下面几种方法测试.App-header的样式：

方法1：用getComputedStyle获取真实计算后的样式 #

直接从DOM元素上获取浏览器计算后的最终样式，这是最贴近用户实际看到的结果：

it('App-header has correct background color', () => {
  const wrapper = mount(<App />);
  const headerDom = wrapper.find('.App-header').getDOMNode();
  const computedStyle = window.getComputedStyle(headerDom);

  expect(computedStyle.backgroundColor).toBe('rgb(40, 44, 52)'); // 注意这里是RGB格式，和CSS里的#282c34对应
  expect(computedStyle.color).toBe('rgb(255, 255, 255)');
});

方法2：用@testing-library/jest-dom的toHaveStyle简化断言 #

这个库提供了更简洁的样式断言语法，用起来更顺手：

1. 安装依赖：npm install @testing-library/jest-dom --save-dev
2. 在测试文件（或全局setup文件）里引入：import '@testing-library/jest-dom';
3. 编写测试：

it('App-header matches expected styles', () => {
  const wrapper = mount(<App />);
  const header = wrapper.find('.App-header').getDOMNode();
  
  expect(header).toHaveStyle({
    backgroundColor: '#282c34',
    color: 'white',
    padding: '2rem 1rem',
  });
});

方法3：结合你已有的chai-jquery断言样式 #

如果你已经配置好chai-jquery，可以直接用它的css断言：

import chai from 'chai';
import chaiJquery from 'chai-jquery';
import { mount } from 'enzyme';
import App from './App';

chai.use(chaiJquery);
const expect = chai.expect;

it('App-header has correct text color', () => {
  const wrapper = mount(<App />);
  expect(wrapper.find('.App-header')).to.have.css('color', 'rgb(255, 255, 255)');
});

小提醒 #

• 如果用了CSS Modules，记得导入样式对象来获取正确的类名：import styles from './App.module.css'，然后用wrapper.find(styles['App-header'])查找元素。
• 尽量避免测试过于细节的样式（比如精确的像素值），优先测试影响用户体验的关键样式（比如背景色、显示/隐藏状态、字体颜色）。

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