Vue 单元测试 - 使用 vue-test-utils mount 时模拟导入的服务

Question

我正在使用 vue-test-utils 中的 mount()，有一个组件可以导入应该在单元测试中模拟的服务。

我看到 mount() 有一个 mocks 选项，但是试图将指南中给出的例子外推，common-tips，模拟注入到注入服务的场景是我无法理解的。

mount(Component, {
  mocks: {
    ...?
  }
})

组件只是简单的导入服务，就是纯JS

import DataService from '../services/data.service'

我可以使用注入加载器来让它工作，这里详细介绍了使用模拟测试

有效的代码

const MyComponentInjector = require('!!vue-loader?inject!./MyComponent.vue')
const mockedServices = {
  '../services/data.service': {
    checkAll: () => { return Promise.resolve() }
  },
}
const MyComponentWithMocks = MyComponentInjector(mockedServices)

const wrapper = mount(MyComponentWithMocks, { store: mockStore, router })

mount(MyComponent, { mocks: ... }) 的语法是什么？

由于 mount() 有一个 mocks 选项，难道不能以某种形式将 mockedServices 传递给它吗？

Answer 1

mocks指的是 Vue 实例。您正在尝试模拟文件依赖项，这是一个不同的问题。正如您所说，一种解决方案是注入加载器。另一个是 babel-plugin-rewire。

让我弄清楚该mocks选项的作用。

mocks 向 Vue 实例添加属性。

如果您有一个注入的应用程序$route，您可能有一个尝试访问它的组件this.$route.path：：

...
  methods: {
    logPath() {
      console.log(this.$route.path)
    }
  } 
... 

如果你在mount没有安装 Vue router 的情况下尝试这个组件，它会抛出一个错误。为了解决这个问题，你可以使用mocksmount 选项向$routeVue 实例注入一个模拟对象：

const $route = { path: 'some/mock/value' }
mount(Component, {
  mocks: {
    $route
  }
})