时间戳

首页 > 解决方案 > 检查状态更新的测试用例似乎没有给出正确的输出

javascript - 检查状态更新的测试用例似乎没有给出正确的输出

问题描述

我有一个简单的函数，可以在单击事件上将组件的状态从 true 切换为 false。 这是功能

public toggleAvailability(dayTime: string): void {
    const isAvailable = this.state[dayTime] === false ? true : false;

    this.setState(
      { [dayTime]: isAvailable }, 
      () => {
      const instructor = {
        userId: this.props.userId,
        availability: this.state.friEarlyAfternoon
      };
      this.props.updateInstructor(instructor);
    });
  }

我正在使用 Jest+Enzyme 进行单元测试，并且我正在尝试按如下方式测试我的切换功能：

describe('Method toggleAvailability()', () => {
    function test_toggleAvailability(dayTime: string, currentState: boolean, toggledState: boolean): void {
      beforeEach(() => {
        wrapper.setState({
          dayTime: currentState,
        });
        wrapper.instance().toggleAvailability(dayTime);
      });

      it(`Sets the state's ${dayTime} to ${toggledState}`, () => {
        expect(wrapper.state().dayTime).toEqual(toggledState);
      });
    }
    test_toggleAvailability('monEarlyMorning', false, true);
    test_toggleAvailability('monEMorning', true, false);
  });

由于某种原因，我无法通过测试。我得到这个： 在此处输入图像描述

有人在这里有建议吗？

标签： javascriptreactjsunit-testingjestjsenzyme

解决方案

任何时候根据现有状态设置状态，都必须使用回调版本setState和它传递给您的状态参数，因为状态更新是异步的，并且可以一起批处理。

所以这：

const isAvailable = this.state[dayTime] === false ? true : false;
this.setState(
  { [dayTime]: isAvailable }, 
  () => {
  const instructor = {
    userId: this.props.userId,
    availability: this.state.friEarlyAfternoon
  };
  this.props.updateInstructor(instructor);
});

应该是这样的，你也为第一个参数传入一个函数：

this.setState(
  prevState => {
    const isAvailable = prevState[dayTime] === false ? true : false;
    return { [dayTime]: isAvailable };
  },
  () => {
    const instructor = {
      userId: this.props.userId,
      availability: this.state.friEarlyAfternoon
    };
    this.props.updateInstructor(instructor);
  }
);

旁注：或者，如果您实际上不需要严格相等=== false，则可以使用!：

this.setState(
  prevState => ( { [dayTime]: !prevState[dayTime] } ),
  () => {
    const instructor = {
      userId: this.props.userId,
      availability: this.state.friEarlyAfternoon
    };
    this.props.updateInstructor(instructor);
  }
);

推荐阅读