模拟 vue 组件依赖

Question

我正在尝试运行一个单元测试，我在其中进行了 axios 调用，这 returns 是一个错误。我已经成功地模拟了调用，但在错误时我调用了对外部库（vue-toasted）的依赖以显示错误消息。

当我的单元测试点击 toasted 时，它是 'undefined':

TypeError: Cannot read property 'error' of undefined

    this.$toasted.error('Search ' + this.searchString + ' returned no results', etc.....

我试图在我的测试包装器中注册这个依赖关系

import Toasted from 'vue-toasted';

jest.mock(Toasted);

这些似乎没有为包装器提供正确的依赖关系。这是我的测试：

it('searches users via axios and returns 404', async () => {
    mock.onPost(process.env.VUE_APP_IDENTITY_API_URL + 'user/search').reply(404);

    await wrapper.vm.searchUsers(1);
    expect(mock.history.post.length).toBe(1);
    expect(wrapper.vm.users).toBeNull();
    expect(wrapper.vm.pagingInfo).toBeNull();
})

这是我的组件包装器的模拟方式：

const wrapper =  shallowMount(Users, {
  stubs: {
    RouterLink: RouterLinkStub
  }
});

有谁知道注册此语法的正确语法是什么？

Answer 1

尝试添加：

const wrapper = shallowMount(Users, {
  mocks: {
     $toasted: {
         error: () => {},
     }
  }
});

当然，您可以为模拟添加更多功能。

模拟 vue 组件依赖

Mocking vue component dependencies

javascript

unit-testing

vue.js

jestjs

vue-test-utils