方法示例

Question

我有一个旨在用作使用axios发出AJAX请求的存储库的类：

export default class SomeRepository {
  getEncryptedValue (value) {
    return axios.get('http://localhost/api/v1/encrypt')
  }
}

我有一个组件，该组件在组件的methods属性内调用此存储库的方法，如下所示：

<template>
  ...
</template>

<script>
import SomeRepository from '@/classes/SomeRepository'

export default {
  data () {
    return {
      value: '',
      result: ''
    }
  },
  methods: {
    encrypt () {
      let someRepo = new SomeRepository()

      someRepo.getEncryptedValue(this.value)
        .then(response => {
          this.result = response.data.result
        })
    }
  }
}
</script>

如何将SomeRepository作为依赖项传递？我的目标是要在单元测试中模拟它。

我正在寻找一种简单的解决方案，最好是不涉及第三方库或样板的解决方案。

我也尝试过：

import Vue from 'vue'
import SomeRepository from '@/classes/SomeRepository'

Vue.use(SomeRepository)
// and
Vue.use(new SomeRepository())

这显然是行不通的（老实说，我没想到他们会这样）。我也尝试按照本文https://codeburst.io/dependency-injection-with-vue-js-f6b44a0dae6d进行操作，但我并不真正喜欢每次要使用依赖项时都必须创建mixin的方法。

我也考虑过将它作为道具，但不确定在传递对象之前将其实例化的位置。

Answer 1

有很多模拟函数的方法。我发现最简单的方法就是简单地接受依赖关系作为函数的参数，然后替换要在测试中使用的函数。

方法示例

// Function
function func(dependency) {
  dependency.use()
}

// In App
func(dependency) // -> runs dependency.use

// In Tests
func(mockDependency) // -> runs mocked dependency.use

您的示例

一旦您知道此方法，就可以做很多不同的版本，但要显示一个超级简单的版本。

encrypt() {
  this._encrypt(SomeRepository)
}
_encrypt (SomeRepository) {
  let someRepo = new SomeRepository()

  someRepo.getEncryptedValue(this.value)
    .then(response => {
      this.result = response.data.result
    })
}

您将使用模拟依赖项测试_encrypt。

您也可以这样做。

encrypt (_SomeRepository=SomeRepository) {
  let someRepo = new _SomeRepository()

  someRepo.getEncryptedValue(this.value)
    .then(response => {
      this.result = response.data.result
    })
}

如果您传递了模拟版本，则将使用该版本，否则将使用真实版本。想法是使用这种方法，但是您认为合适，但我认为您可以理解。它非常简单，不需要任何魔术，也不需要库。

Answer 2

您应该使用Vue插件 https://vuejs.org/v2/guide/plugins.html 然后您可以通过例如this.$someDeps

对于单元测试，您可以使用Vue Test Utils https://vue-test-utils.vuejs.org/api/options.html#mocks

对其进行轻松模拟。

如何将依赖项传递给Vue组件？

2 个答案:

方法示例

您的示例