首页 文章

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

提问于
浏览 次
1

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

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

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

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

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

我可以使用这里详述的注入加载器来实现它Testing With Mocks

The code that does work

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

What is the syntax for mount(MyComponent, )?

由于mount（）有一个mocks选项，是不是可以以某种形式将mockedServices传递给它？

unit-testing vuejs2

1 回答

  • 2

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

    让我澄清 mocks 选项的作用 .

    mocks 将属性添加到Vue实例 .

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

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

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

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

相关问题