首页 > 解决方案 > 如何在 Jest 的函数组件中测试回调函数

问题描述

如果我删除回调() =>测试完成成功,但我需要这个回调的功能

零件

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

测试

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

版本开玩笑 24.9

标签: javascriptreactjsreact-nativejestjsenzyme

解决方案


slideClicked 不是您项目的道具,您需要先找到 Slide,然后您将获得正确的道具。

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

推荐阅读