使用 jest 和酶进行测试时，在单击事件中不调用模拟函数

Question

我正在尝试测试一个 redux 连接的反应组件，即 Cart，但我无法让下面的测试工作。我想看看是否在按钮的单击处理程序中调用了一个动作（从 material-ui 包导入）。

动作通过 mapDispatchToProps 映射到道具。

const mapDispatchToProps = dispatch =>
  bindActionCreators(SelectItemGalleryActions, dispatch);

我也在用

import configureStore from 'redux-mock-store';

在测试中将模拟存储传递给我的组件。

处理程序被调用，但间谍没有记录它已被调用。我已经尝试了在这里或 github 上找到的大多数解决方案（浅层、模拟、潜水、使用 jest.fn() 而不是 spy() ...）；你有什么想法？我假设调用了对我尝试测试的模拟函数的不同引用。

首先我要传递一个模拟商店和一个动作

const props = {
  store: mockStore({ selectItemGallery: { cartItems: [{ name: 'one' }] } }),
  removeAllItemsFromCartAction: spy()
};
const wrapper = mount(<Cart {...props} />);

之后我搜索我的按钮并模拟点击它

const button = wrapper.find(Button).at(0);
button.prop('onClick')('test1');
button.prop('onClick')('test2');

当我运行测试时，点击会起作用。我从处理程序内部获得 console.log() 输出。

期望

expect(props.removeAllItemsFromCartAction.called).toBe(true);

但是它没有被调用。

这是实际的处理程序

 <Button
    color="primary"
    onClick={x => {
      console.log(`onClick called on component with info ${x}`);
      removeAllItemsFromCartAction();
      console.log('removeAllItemsFromCartAction call is above me');
    }}>    
        {t('Clear All')}
 </Button>

控制台显示

欢迎任何提示或想法。谢谢。

版本：

"enzyme": "^3.8.0",
"enzyme-adapter-react-16": "^1.7.1",
"jest": "^23.6.0",
"sinon": "^7.2.2",
"react": "^16.8.2"

Answer 1

这似乎不是测试动作是否通过mapDispatchToProps 映射到道具的正确方法 被调用了。

实际调用了来自模拟存储的调度，我们只需要验证它是否发送了正确的操作 (https://redux.js.org/recipes/writing-tests)。

正确的测试是：

  it('Should call the removeAllItemsFromCartAction', () => {
    const props = {
      store: mockStore({ selectItemGallery: { cartItems: [{ name: 'one' }] } })
    };
    const wrapper = mount(<Cart {...props} />);
    const button = wrapper.find(Button).at(0);
    button.prop('onClick')();
    console.log(props.store.getActions());
    expect(props.store.getActions()).toEqual([
      { type: 'REMOVE_ALL_ITEMS_FROM_CART' }
    ]);
  });

Answer 2

这些测试可能非常挑剔，但我怀疑问题在于您如何设置间谍，因为根据您的控制台日志，该功能正在受到打击。首先，我认为您实际上并不需要间谍，您可以使用传入的模拟函数，只要 removeAllItemsFromCartAction() 实际上在您的组件道具上。

const myMock = jest.fn();
const props = {
  store: mockStore({ selectItemGallery: { cartItems: [{ name: 'one' }] } }),
  removeAllItemsFromCartAction: myMock
};
const wrapper = mount(<Cart {...props} />);
const button = wrapper.find(Button).at(0);
button.simulate("click");
expect(myMock).toHaveBeenCalled();

你可能已经尝试过了，但这是我唯一的想法。