javascript - 如何在 Vue.js 中测试计算属性？无法模拟 "data"

Question

我想知道如何在 Vue.js 的单元测试中测试计算属性。

我已经通过vue-cli(基于webpack)创建了一个新项目。

例如这是我的组件:

<script>
  export default {
    data () {
      return {
        source: []
      }
    },
    methods: {
      removeDuplicates (arr) {
        return [...new Set(arr)]
      }
    },
    computed: {
      types () {
        return this.removeDuplicates(this.source))
      }
    }
  }
</script>

我试过这样测试

it('should remove duplicates from array', () => {
  const arr = [1, 2, 1, 2, 3]
  const result = FiltersList.computed.types()
  const expectedLength = 3

  expect(result).to.have.length(expectedLength)
})

---

QUESTION(两个问题):

1. this.source 是 undefined。如何模拟或设置值(value)？ (FiltersList.data 是一个函数);
2. 也许我不想调用 removeDuplicates 方法，但如何模拟( stub )此调用？

Answer 1

好的。我找到了一个愚蠢的解决方案。愚蠢但有效。

您已被警告 =)

思路:使用 .call({}) 替换 this inside that calls:

it('should remove duplicates from array', () => {
  const mockSource = {
     source: [1, 2, 1, 2, 3],
     getUniq (arr) {
       return FiltersList.methods.removeDuplicates(arr)
     }
  }

  const result = FiltersList.computed.types.call(mockSource)
  const expectedLength = 3

  expect(result).to.have.length(expectedLength)
})

所以基本上你可以用任何类型的数据指定你自己的this。 并调用 YourComponent.computed.foo.call(mockSource)。方法相同