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

问题（两个问题）：

this.source是undefined。如何模拟或设置它的价值？（FiltersList.data是一个函数）;
也许我不想调用removeDuplicates方法，但如何模拟（存根）此调用？

Answer 1

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

您已被警告=）

想法：使用.call({})替换调用中的this：

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)。方法相同

Answer 2

只需更改依赖于计算属性的变量并期望它。

这是我的组件计算道具的工作示例：

MazeSolver

如何在Vue.js中测试计算属性？无法模拟“数据”

2 个答案: