React-day-picker 测试与酶和玩笑答案

【问题标题】：React-day-picker test with enzyme & jestReact-day-picker 测试与酶和玩笑
【发布时间】：2021-10-07 16:43:29
【问题描述】：

我试图用enzyme 和jest 从https://react-day-picker.js.org/examples/selected-multiple 测试react-day-picker，但不幸的是我收到了一个错误：TypeError: Cannot read property 'selected' of undefined。主要是我想测试handleDayClick() 方法

我的组件

export default class MultiDayPicker extends Component {
  state = {
    selectedDays: []
  };

  handleDayClick = (day, {selected}) => {
    const {selectedDays} = this.state;

    if (selected) {
      const selectedIndex = selectedDays.findIndex(selectedDay =>
        DateUtils.isSameDay(selectedDay, day)
      );

      selectedDays.splice(selectedIndex, 1);
    } else {
      selectedDays.push(day);
    }

    this.setState({selectedDays});
  };

  render() {
    return (
      <DayPicker
        selectedDays={this.state.selectedDays}
        onDayClick={this.handleDayClick}
      />
    );
  }
}

我的测试：

it('should call the `handleDayClick` function', () => {
    const component = shallow(<MultiDayPicker {...defaultProps} />);

    expect(component.instance().handleDayClick()).toHaveBeenCalled();
  });

如果有任何想法或帮助，我将不胜感激，在此先感谢

【问题讨论】：

标签： javascript reactjs jestjs enzyme react-day-picker

【解决方案1】：

也许你必须在 DayPicker 上添加修饰符道具

<DayPicker
    selectedDays={this.state.selectedDays}
    onDayClick={this.handleDayClick}
    modifier={{selected: this.state.selectedDays}}
 />

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。