使用vue-test-utils测试动作

问题描述

我试图测试单击btn后是否调用了操作fn，但是测试使用toHaveBeenCalled方法给了我负面的结果。 我有几个按钮可以调用多个操作，所有操作的测试行为都相同 所有数据均已检查，并且其中没有错误。

<v-btn
  v-if="task.id"
  small
  class="elevation-0"
  color="red lighten-2 white--text"
  @click="handleDelete"
>
 delete
</v-btn>

methods: {
    ...mapActions({
      deleteTask: 'task/deleteTask'
    }),handleDelete() {
      this.deleteTask(this.task).then(() => {
        this.task.project.removeTask(this.task);
        this.$emit('close');
      });
    }
  }

let store,project,mockedStoreConfig;
  const localVue = createLocalVue();
  localVue.use(Vuex);

  beforeEach(() => {
    mockedStoreConfig = {
      modules: {
        task: {
          namespaced: true,actions: {
            saveTask: jest.fn(),deleteTask: jest.fn()
          }
        }
      }
    };
    store = new Vuex.Store(mockedStoreConfig);
    project = new Project(
      projectsWithTasks.find(project => project.tasks.length > 0)
    );
  });

it('Should dispatch task/deleteTask when the DELETE TASK button is clicked',() => {
    const wrapper = shallowMount(TaskForm,{
      propsData: {
        teamMembers: project.teamMembers,task: new Task({ ...tasks[0],project })
      },localVue,store
    });

    //find the delete button
    wrapper
      .findAllComponents(VBtn)
      .at(1)
      .trigger('click');

    expect(
      mockedStoreConfig.modules.task.actions.deleteTask
    ).toHaveBeenCalled();
  });

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）