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

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

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

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

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

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

我可以使用此处详细介绍的注入(inject)加载器使其工作 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 传递给它吗？

请您参考如下方法:

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

让我澄清一下 mocks选项可以。
mocks向 Vue 实例添加属性。

如果您有一个注入(inject) $route 的应用程序，您可能有一个组件试图访问它:this.$route.path :

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

如果您尝试 mount这个组件没有安装Vue路由器，会报错。要解决此问题，您可以使用 mocks用于注入(inject)模拟的挂载选项 $route Vue 实例的对象:

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