Vue.js에서 계산된 속성을 테스트하는 방법"데이터"를 조롱할 수 없음

Vue.js에서 계산된 속성을 테스트하는 방법"데이터"를 조롱할 수 없음

에서 계산 속성을 테스트하는 방법을 알고 싶습니다.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)
})

---

질문 (2가지 문제):

1. this.source이undefined어떻게 조롱하거나 가치를 설정합니까?(FiltersList.data함수);
2. 전화하고 싶지 않은가 봐removeDuplicates이 콜을 어떻게 조롱할 수 있을까요?

좋아, 멍청한 해결책을 찾았어멍청하지만 효과가 있다.

경고를 받았습니다=)

아이디어는 다음과 같습니다.사용방법.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)·방법도 동일

계산된 속성에 따라 달라지는 변수를 변경하고 기대하기만 하면 됩니다.

컴포넌트 계산 프로포트의 작업 예를 다음에 나타냅니다.

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

언급URL : https://stackoverflow.com/questions/41858262/how-to-test-computed-properties-in-vue-js-cant-mock-data