1

I was trying to test react-day-picker from https://react-day-picker.js.org/examples/selected-multiple with enzyme and also jest but unfortunately I am getting an error: TypeError: Cannot read property 'selected' of undefined. Mostly I want to test handleDayClick() method

my component 

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}
      />
    );
  }
}

my tests:

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

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

I will appreciate any ideas or help, thanks in advance

JustJSFan
  • 143
  • 1
  • 1
  • 6

1 Answers1

0

Maybe you must add modifiers prop on DayPicker

<DayPicker
    selectedDays={this.state.selectedDays}
    onDayClick={this.handleDayClick}
    modifier={{selected: this.state.selectedDays}}
 />
Aradea Atfal
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 07 '21 at 08:44