我试图测试单击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();
});