Jest+Enzyme测试React组件状态更新用例失败求助

我来帮你排查下这个单元测试失败的问题，主要是几个细节没处理到位，咱们一步步来修正：

1. 核心问题：State操作未使用计算属性名 #

你在测试里的wrapper.setState({ dayTime: currentState })和expect(wrapper.state().dayTime)这两处都犯了同一个错误：直接把dayTime当成了固定的state字段名，而不是用它作为变量来访问动态的state键。

举个例子，当你传入monEarlyMorning作为参数时，代码实际是把state里的dayTime字段设为了false，而不是monEarlyMorning字段。断言的时候也是在取dayTime的值，自然和预期不符。

修正方式：用ES6的计算属性名，把变量用方括号包裹起来：

• 设置state时：wrapper.setState({ [dayTime]: currentState })
• 断言时：expect(wrapper.state()[dayTime]).toEqual(toggledState)

2. 测试结构逻辑混乱 #

你把toggleAvailability的调用放在了beforeEach里，但每次调用test_toggleAvailability都会定义新的beforeEach和it块，这会导致测试用例之间互相干扰。正确的做法是把方法调用放在it块内部，确保每个测试用例都是独立执行的。

3. 处理setState的异步性 #

组件内部的setState是异步操作，调用toggleAvailability后，state不会立刻更新。Enzyme提供了wrapper.update()方法，可以手动同步组件的状态，确保断言时能拿到最新的state值。

修正后的完整测试代码 #

describe('Method toggleAvailability()', () => {
  // 封装测试逻辑的函数，调整结构
  const testToggleAvailability = (dayTime: string, currentState: boolean, toggledState: boolean) => {
    it(`Sets the state's ${dayTime} to ${toggledState}`, () => {
      // 初始化目标字段的初始状态
      wrapper.setState({ [dayTime]: currentState });
      
      // 调用toggle方法
      wrapper.instance().toggleAvailability(dayTime);
      
      // 同步组件状态，确保异步setState完成
      wrapper.update();
      
      // 断言目标字段的状态
      expect(wrapper.state()[dayTime]).toEqual(toggledState);
    });
  };

  testToggleAvailability('monEarlyMorning', false, true);
  testToggleAvailability('monEMorning', true, false);
});

额外提示：组件方法里的潜在bug #

我注意到你在toggleAvailability的setState回调里写了：

const instructor = { 
  userId: this.props.userId, 
  availability: this.state.friEarlyAfternoon 
};

这里的availability固定取了friEarlyAfternoon的状态，但你的方法是接收dayTime参数来切换不同时间段的状态，这应该是个笔误吧？正确的写法应该是availability: this.state[dayTime]，不然不管切换哪个时间段，都会把周五早下午的状态传给updateInstructor哦。

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