模拟器测试

＃使用Mocks测试

在现实世界的应用程序中，我们的组件很可能具有外部依赖性。当为组件编写单元测试时，如果我们可以模拟这些外部依赖性，以使我们的测试仅依赖于被测试组件的行为，这将是理想的。

vue-loader提供了一个特性，它允许你使用inject-loader向*.vue组件注入任意依赖项。一般的想法是，不是直接导入组件模块，我们使用inject-loader为该模块创建一个“模块工厂”函数。当这个函数被一个mock对象调用时，它返回一个带有mocks的模块的实例。

假设我们有一个这样的组件：

<!-- example.vue -->
<template>
  <div class="msg">{{ msg }}</div>
</template>

<script>
// 这个依赖需要被mocked
import SomeService from '../service'

export default {
  data () {
    return {
      msg: SomeService.msg
    }
  }
}
</script>

下面是如何使用mock导入它：

注意：inject-loader@3.x目前不稳定。

npm install inject-loader@^2.0.0 --save-dev

// example.spec.js
const ExampleInjector = require('!!vue?inject!./example.vue')

注意，crazy require string - 我们在这里使用一些内联的webpack加载器请求。 快速解释：

• !!在开始时意味着“禁止所有加载器从全局配置”;
• vue？inject！意思是“使用vue加载器，并传递？inject查询。 这告诉vue-loader在依赖注入模式下编译组件。

返回的“ExampleInjector”是一个工厂函数，可以调用它来创建example.vue模块的实例：

const ExampleWithMocks = ExampleInjector({
  // mock it
  '../service': {
    msg: 'Hello from a mocked service!'
  }
})

最后，我们可以像平常一样测试组件：

it('should render', () => {
  const vm = new Vue({
    template: '<div><test></test></div>',
    components: {
      'test': ExampleWithMocks
    }
  }).$mount()
  expect(vm.$el.querySelector('.msg').textContent).toBe('Hello from a mocked service!')
})