React.js：使用Enzyme模拟点击时单元测试状态失败问题求助

我看到你在给基于React的购物车应用编写Jest+Enzyme单元测试时遇到了运行问题，先从你给出的代码片段里梳理几个常见的坑，咱们一步步排查：

1. 未完成的异步测试逻辑 #

你代码里的test('Test it', asy...明显是截断的异步测试函数。如果你的测试涉及异步操作（比如状态更新、模拟接口请求），Jest不会自动等待异步完成，直接结束测试就会导致结果不符合预期。

修复示例：
如果用async/await写法，要补全逻辑并确保等待异步操作完成：

test('Test Todo component state update', async () => {
  const wrapper = shallow(<Todo />);
  
  // 触发某个会改变状态的异步操作
  await wrapper.find('.add-to-cart-btn').simulate('click');
  
  // 等待组件更新状态
  wrapper.update();
  
  // 断言状态或UI变化
  expect(wrapper.state('cartItems')).toHaveLength(1);
});

2. Enzyme配置位置不合理 #

你把Enzyme的适配器配置写在了单个测试文件里，这不仅重复冗余，还可能因为配置时机问题导致渲染错误。

修复方案：

• 在项目的src目录下创建setupTests.js文件（Create React App会自动识别这个文件）
• 将配置代码移到这个文件中：

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

• 如果是非CRA项目，需要在jest.config.js里指定这个setup文件：

module.exports = {
  setupFilesAfterEnv: ['./src/setupTests.js'],
};

3. 组件渲染的依赖缺失 #

如果你的Todo组件依赖全局状态（比如Redux、Context）或者外部资源，仅用shallow渲染可能无法正常运行，需要模拟对应的依赖环境。

示例：模拟Redux Provider

import { Provider } from 'react-redux';
import configureStore from 'redux-mock-store';

const mockStore = configureStore([]);
const initialState = { cart: { items: [] } };
const store = mockStore(initialState);

test('Test Todo with Redux', () => {
  const wrapper = mount(
    <Provider store={store}>
      <Todo />
    </Provider>
  );
  
  // 后续断言逻辑
});

4. 依赖版本不兼容 #

React 16对应的Enzyme适配器是enzyme-adapter-react-16，要确保Jest、Enzyme、适配器和React的版本匹配，版本冲突是测试失败的常见原因。

推荐的版本组合示例（package.json）：

{
  "devDependencies": {
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.6",
    "jest": "^26.6.0",
    "react": "^16.14.0"
  }
}

如果以上方案还没解决问题，建议补充完整的测试代码和控制台报错信息，这样能更精准定位问题~

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