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

Question

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

我看到 mount() 有一个 mocks 选项，但试图将guides, common-tips, mocking injections 给出的示例外推到注入服务的场景让我望而却步。

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

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

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

我可以使用inject-loader 让它工作，这里有详细介绍Testing With Mocks

有效的代码

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)
    }
  } 
... 

如果你在不安装Vue路由器的情况下尝试mount这个组件，会抛出错误。为了解决这个问题，您可以使用 mocks 挂载选项将模拟 $route 对象注入 Vue 实例：

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