React Enzyme测试：模拟按钮点击后如何校验shallow包装器的active类名

你遇到的类名为空、active类匹配失败的问题，是多个独立bug叠加导致的，逐一排查即可定位：

• 测试环境未正确处理CSS Module导入：这是debug打印class为空的核心原因。你在组件中导入的./styles.module.scss，如果Jest没有配置对应的mock规则，拿到的style对象是空对象，style.container、style.active全为undefined，最终拼接出的类名自然是空字符串。
• 组件代码存在导入漏项：你在Button.tsx中使用了useState、cx（classnames工具函数），但没有对应的导入语句，组件本身就无法正常运行。
• 类名校验逻辑匹配错误：CSS Module的类名不是纯文本的active，编译后会生成带哈希值的唯一类名（比如Button_active_abc123），就算逻辑跑通，直接用.active选择器也永远匹配不到元素。
• Enzyme浅渲染的状态不同步：老版本Enzyme配合React 16+使用时，simulate触发事件后，组件内部状态更新不会自动同步到shallow包装器，需要手动触发更新才能拿到最新的渲染结果。
• 测试props拼写错误：传参时把title写成了titie，虽然不影响类名逻辑，但属于无效传参。

1. 补全组件代码的基础漏项 #

修正后的Button.tsx基础结构：

import React, { useState } from 'react';
import cx from 'classnames';
import style from './styles.module.scss';

export interface ButtonPropTypes {
  title?: string;
}

const Button = ({ title }: ButtonPropTypes) => {
  const [active, setActive] = useState(false);

  return (
    <div
      className={cx(style.container, {
        [style.active]: active,
      })}
      onClick={() => setActive(!active)}
    >
      {title}
    </div>
  );
}

export default Button;

2. 配置Jest对CSS Module的Mock规则 #

在Jest配置文件（一般为jest.config.js或者package.json中的jest配置字段）中增加moduleNameMapper配置，把所有scss/css模块的导入映射成带固定键值的mock对象，确保测试中拿到的style不是空值：

moduleNameMapper: {
  '\\.(scss|css)$': '<rootDir>/__mocks__/styleMock.js'
}

对应创建__mocks__/styleMock.js文件，内容为：

// 返回固定的类名映射，和实际组件引用的类名键值对应
module.exports = {
  container: 'mock-container',
  active: 'mock-active'
};

配置完成后，组件中导入的style对象就会有固定的container、active属性值，不会再出现类名为空的情况。

3. 修正测试用例的执行逻辑 #

• 补全组件状态同步逻辑：模拟点击事件后调用wrapper.update()，确保拿到最新的渲染结果
• 替换错误的类名选择逻辑：不要用纯类名.active匹配，改用mock返回的实际类名校验，或者直接检查className的字符串内容
  修正后的测试用例：

import React from 'react';
import { shallow, ShallowWrapper } from 'enzyme';
// 导入和测试mock一致的style对象
import style from './styles.module.scss';
import Button from './index';

let wrapper: ShallowWrapper;

beforeEach(() => {
  // 修正props拼写错误
  wrapper = shallow(<Button title="Toggle Me"/>);
});

describe('<Button />', () => {
  it('should be defined', () => {
    expect(Button).toBeDefined();
  });

  it('should match snapshot', () => {
    expect(wrapper).toMatchSnapshot();
  });

  it('should button toggle active class on click', () => {
    // 初始状态下不包含active类
    const initialDiv = wrapper.find('div').first();
    expect(initialDiv.hasClass(style.active)).toBe(false);

    // 模拟点击事件
    initialDiv.simulate('click');
    // 手动同步shallow包装器的状态
    wrapper.update();

    // 点击后校验类名变化
    const clickedDiv = wrapper.find('div').first();
    expect(clickedDiv.hasClass(style.active)).toBe(true);
    console.log(wrapper.debug()); // 此时可看到div的class已带上mock的active类名
  });
});

• 如果使用React 18搭配Enzyme 3的版本，需要额外配置对应的适配器（比如@cfaester/enzyme-adapter-react-18），不然shallow渲染的事件触发逻辑可能不生效。
• 不需要为了类名校验强行用mount全量渲染，shallow渲染只要配置正确、手动同步状态，完全可以满足类名校验的需求，不会增加额外的渲染成本。

内容的提问来源于stack exchange，提问作者Steven.J