如何在 Vue.js 中测试计算属性？不能模拟“数据”答案

【问题标题】：How to test computed properties in Vue.js? Can't mock "data"如何在 Vue.js 中测试计算属性？不能模拟“数据”
【发布时间】：2017-06-11 00:39:04
【问题描述】：

我想知道如何在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（两个问题）：

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

【问题讨论】：

标签： javascript unit-testing testing vue.js vuejs2

【解决方案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)。方法也一样

【讨论】：

@Theo 欢迎））

【解决方案2】：

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

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

import Vue from 'vue'
import Zoom from 'src/components/Zoom'
import $ from 'jquery'

/* eslint-disable no-unused-vars */
/**
 * get template for wrapper Vue object make Vue with Zoom component and that template
 * @param wrapperTemplate
 * @returns {Vue$2}
 */
const makeWrapper = (wrapperTemplate = '<div><zoom ref="component"></zoom></div>') => {
  return new Vue({
    template: wrapperTemplate,
    components: {Zoom}
  })
}

const startWrapperWidth = 1093
const startWrapperHeight = 289
const startImageWidth = 1696
const startImageHeight = 949
const padding = 15

/**
 * gets vueWrapper and return component from it
 * @param vueWrapper
 * @param useOffset
 * @returns {'Zoom component'}
 */
const setSizesForComponent = (vueWrapper) => {
  vueWrapper.$mount()
  var cmp = vueWrapper.$refs.component
  var $elWrapper = $(cmp.$el)
  var $elImage = $elWrapper.find(cmp.selectors.image)
  $elWrapper.width(startWrapperWidth)
  $elWrapper.height(startWrapperHeight)
  $elWrapper.css({padding: padding})
  $elImage.width(startImageWidth)
  $elImage.height(startImageHeight)
  cmp.calculateSizesAndProportions()
  return cmp
}
describe('onZoom method (run on mousemove)', () => {
  sinon.spy(Zoom.methods, 'onZoom')
  let vueWrapper = makeWrapper()
  let cmp = setSizesForComponent(vueWrapper)
  let e = document.createEvent('HTMLEvents')
  e.initEvent('mousemove', true, true)
  e.pageX = 150
  e.pageY = 250
  let callsOnZoomBeforeMousemove = Zoom.methods.onZoom.callCount
  cmp.$el.dispatchEvent(e)
  describe('left and top computed props', () => {
    it('left', () => {
      expect(cmp.left).is.equal(-74)
    })
    it('top', () => {
      expect(cmp.top).is.equal(-536)
    })
  })
})

【讨论】：