使用vue-test-utils测试动作

时间:2020-08-19 00:51:34

标签: javascript vue.js 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();
  });

0 个答案:

没有答案