Question

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

我看到mount（）有一个mocks选项，但试图将guides, common-tips, mocking injections给出的示例推断到注入服务的场景是我的意思。

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

组件只是导入服务，这是普通的JS

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

我可以使用这里详细介绍的注入加载程序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-reire。

让我澄清mocks选项的作用。

mocks向Vue实例添加属性。

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

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

如果在没有安装Vue路由器的情况下尝试mount此组件，则会抛出错误。要解决此问题，您可以使用mocks mount选项将模拟$route对象注入Vue实例：

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

Vue单元测试 - 使用vue-test-utils mount

1 个答案: