Question

我正在为vue组件编写有趣的测试用例我有一个调用商店调度功能的方法

dismissed() {
      this.$store.dispatch("alert/hideAlert");
},

在测试用例中，我正在触发如下所示的已关闭事件，并期望store操作方法调用

 wrapper.vm.dismissed();
 await wrapper.vm.$nextTick();
 expect(actions.hideAlert).toHaveBeenCalled();

但已关闭的方法调用“ wrapper.vm.dismissed（）;”运行测试用例时抛出以下错误

无法读取未定义的属性“ dispatch”

我如何测试这种Vue方法？

Answer 1

我认为这是最简单的方法。

const mockStore = { dispatch: jest.fn() }
const wrapper = shallowMount(YourComponent, {
   mocks: {
      $store: mockStore
   }
}

wrapper.vm.dismissed();
await wrapper.vm.$nextTick();
expect(mockStore.dispatch).toHaveBeenCalledWith('alert/hideAlert');

但是您也可以用不同的方式来做。 Check this article

如何使用具有商店调度功能的vue-test-utils和jest在组件中为Vue方法编写Vue测试用例

1 个答案: