如何在 Jest 的函数组件中测试回调函数

Question

If I remove callback () => test completed success, but me need this callback for functionality

Component

const Slider = ({slideSelected, slides}) => {
  const slideClicked = slide => () => { // can't test this
    slideSelected(slide);
  };

  const renderSlide = item => (
    <Slide
      slideClicked={slideClicked}
      item={item}
    />
  );

  return (
    <Carousel
      data={slides}
      renderItem={renderSlide}
    />
  );
};

test

const slideSelectedFunc = jest.fn();
wrapper.setProps({
  slides: [{ title: 'hello' }],
  slideSelected: slideSelectedFunc,
})
const Item = sliderShallowWrapper.find('Carousel').prop('renderItem');
const itemShallowWrapper = shallow(<Item item={[{ title: 'hello' }]} />);
itemShallowWrapper.props().slideClicked();
expect(slideSelectedFunc).toHaveBeenCalled(); // error

Version Jest 24.9

Answer 1

slideClicked is not prop of your item you need to find Slide first and then you will get a correct prop.

itemShallowWrapper.find("Slide").props().slideClicked();
expect(slideSelectedFunc).toHaveBeenCalled();