Reactjs 如何将jest.spyOn与函数react组件一起使用

我想测试当我使用

Jest.spyOn

单击按钮时，是否调用了

handleAddBookToCart函数

提前感谢您的帮助

const HomeComponent = props => {
    const { addBookToCart } = props;

    const handleAddBookToCart = id => {
       addBookToCart(id);
    };

    return (
        <button onClick={() => handleAddBookToCart(id)}></button>
    )
}

//Container
const mapDispatchToProps = dispatch => ({
    addBookToCart: idBook => dispatch(cartOperations.addBookToCart(idBook))
});

//file test
describe('Test home component', () => {
   let container;
   let wrapper;
   let component;

   beforeEach(() => {
       wrapper = mount(
           <Provider store={store}>
               <HomeContainer />
           </Provider>
    );
    container = wrapper.find(HomeContainer);
    component = container.find(HomeComponent);

it('calls the handleAddBookToCart function when the button is clicked', () => {
    const spy = jest.spyOn(???)
    component.find('button').simulate('click');
    expect(spy).toHaveBeenCalled();
});

const HomeComponent=props=>{
const{addBookToCart}=props；
const handleAddBookToCart=id=>{
addBookToCart（id）；
};
返回(
HandLeadBookToCart（id）}>
)
}
//容器
const mapDispatchToProps=调度=>({
addBookToCart:idBook=>dispatch（cartooperatis.addBookToCart（idBook））
});
//文件测试
描述（'测试主页组件'，（）=>{
让容器；
让包装纸；
let组件；
在每个之前（（）=>{
包装=装载(
);
container=wrapper.find（HomeContainer）；
组件=容器。查找（HomeComponent）；
它（'单击按钮时调用HandLeadBookToCart函数'，（）=>{
常数间谍=笑话间谍（？？？）
component.find（'button'）。simulate（'click'）；
期望（间谍）。已被调用（）；
});
一个简单的方法是向属性addBookToCart发送一个模拟，并在单击按钮时监视该属性

因此，当您为单元测试创建/装载/装载组件时，请尝试以下方法（装载来自Ezyme，但可以随意使用现有的组件测试方法）：

constspy=jest.fn（）；
const component=mount（）；
一个简单的方法是向属性addBookToCart发送一个模拟，并在单击按钮时监视该属性

因此，当您为单元测试创建/装载/装载组件时，请尝试以下方法（装载来自Ezyme，但可以随意使用现有的组件测试方法）：

constspy=jest.fn（）；
const component=mount（）；
您是否必须使用
spyOn
？您只需通过一个笑话模拟fn作为
addBookToCart
道具


it('calls the handleAddBookToCart function when the button is clicked', () => {
   const props = {
     addBookToCart: jest.fn(),
     ...your other props
   }
   const component = shallow(<HomeComponent {...props} />)
    component.find('button').simulate('click');
    expect(props.addBookToCart).toHaveBeenCalled();
});


它（'单击按钮时调用HandLeadBookToCart函数'，（）=>{
常量道具={
addBookToCart:jest.fn（），
…你的其他道具
}
常量分量=浅（）
component.find（'button'）。simulate（'click'）；
expect（props.addBookToCart）.tohavebeincalled（）；
});
您是否必须使用
spyOn
？您只需通过一个笑话模拟fn作为
addBookToCart
道具


it('calls the handleAddBookToCart function when the button is clicked', () => {
   const props = {
     addBookToCart: jest.fn(),
     ...your other props
   }
   const component = shallow(<HomeComponent {...props} />)
    component.find('button').simulate('click');
    expect(props.addBookToCart).toHaveBeenCalled();
});


它（'单击按钮时调用HandLeadBookToCart函数'，（）=>{
常量道具={
addBookToCart:jest.fn（），
…你的其他道具
}
常量分量=浅（）
component.find（'button'）。simulate（'click'）；
expect（props.addBookToCart）.tohavebeincalled（）；
});
addBookToCart它到底做什么？ajax请求还是javascript内容？不，这是一个简单的redux操作addBookToCart它到底做什么？ajax请求还是javascript内容？不，这是一个简单的redux操作谢谢你的回答，我还有一个问题，我如何传递来自容器连接的道具并覆盖它。我有更新ed我的请求谢谢你的回答，我还有一个问题，我如何通过道具并覆盖来自容器连接的道具。我已经更新了我的请求谢谢你的回答，我还有一个问题，我如何通过道具并覆盖来自容器连接的道具。我已经更新了我的请求。我一直认为这是一个很好的实践，to只导出基类而不应用连接并进行测试。这样我就可以完全控制道具来帮助测试所有场景，并且我不会重新测试redux的代码。谢谢你的回答，我还有一个问题，如何传递道具并覆盖来自容器连接的道具。我已经更新了我的请求。我总是发现它是good练习在不应用连接的情况下导出基类并进行测试。这样我就可以完全控制道具来帮助测试所有场景，而不是重新测试redux的代码。