Vue.js vue测试实用程序：vue子组件方法；不是一个函数；

在这个测试中，我只是试图断言

end

属性是在被测试的组件上设置的（

DateRangeEditor

）。组件假定

this.$refs.datepicker

是的实例，并调用其

setCheckOut

和

setCheckIn

方法（如果有更好的方法，请告诉我！）

组件在浏览器中正常加载时工作，但我对

setEndDate

的测试失败，出现“TypeError:this.$refs.datepicker.setCheckIn不是函数”

我是否误解了设置

存根

选项应该做什么？我认为这样的场景，调用代码只需要调用存根函数，而不需要特定的结果，正是存根的用途。我只是用错了吗

这是我的测试：

import { mount, shallow } from 'vue-test-utils'
import DateRangeEditor from '../../assets/src/components/DateRangeEditor.vue'

describe('DateRangeEditor', () => {

  describe('@checkOutChanged', () => {
    it('sets a new end date', () => {
      const wrapper = shallow(DateRangeEditor, {
        stubs: ['datepicker']
      })

      // simulate user changing the end date
      const date = new Date(2017, 11, 1)
      wrapper.vm.$refs.datepicker.$emit('checkOutChanged', date)

      expect(wrapper.vm.end).to.equal(date)
    })
  })

  describe('@checkInChanged', () => {
    it('sets a new start date', () => {
      const wrapper = shallow(DateRangeEditor, {
        stubs: ['datepicker']
      })

      // simulate user changing the start date
      const date = new Date(2017, 11, 1)
      wrapper.vm.$refs.datepicker.$emit('checkInChanged', date)

      expect(wrapper.vm.start).to.equal(date)
    })
  })
})

这是我的（大大简化的）DateRangeEditor组件：

<template>
  <div class="date-range-editor-container">
    <datepicker
      @checkInChanged="setStartDate"
      @checkOutChanged="setEndDate"
      ref="datepicker"
    ></datepicker>
    <button type="button" @click="save" class="btn save-btn">Save</button>
    <button type="button" @click="cancel" class="btn cancel-btn">Cancel</button>
  </div>
</template>

<script>
import HotelDatePicker from 'vue-hotel-datepicker'

export default {
  methods: {
    setStartDate: function(newDate) {
      if (newDate) {
        // make sure newDate has an hour component
        newDate.setHours((new Date()).getHours())
        this.$refs.datepicker.setCheckIn(newDate)
        this.start = newDate
      }
    },
    setEndDate: function(newDate) {
      if (newDate) {
        // make sure newDate has an hour component
        newDate.setHours((new Date()).getHours())
        this.$refs.datepicker.setCheckOut(newDate)
        this.end = newDate
      }
    },
    save: function() {
      this.$emit('save', this.$data)
    },
    cancel: function() {
      this.$emit('cancel', this.$data)
    },
  },
  data: function() {
    return {
      start: '',
      end: '',
    }
  },
  components: {
    datepicker: HotelDatePicker,
  }
}
</script>

<style>
</style>

什么东西

• @vue/测试用例^1.0.0-beta.10
• vue^2.4.4

---

存根

替换子组件方法。这就是为什么会出现错误

如果要检查是否正在调用某个方法，可以使用这些方法创建一个组件，并将其传递到

stubs

选项中

const datepicker = {
    setCheckIn: () => {},
    setCheckOutDate: () => {},
    render: () => {}
}

it('sets a new end date', () => {
  const wrapper = shallow(DateRangeEditor, {
    stubs: {
      datepicker
    }
  })

  const date = new Date(2017, 11, 1)
  wrapper.vm.$refs.datepicker.$emit('checkOutChanged', date)
  expect(wrapper.vm.end).to.equal(date)
})

---

您好@Edd，感谢您的回答和您在Vue上的工作！是的，我最初尝试过，但当我这么做时，我得到“Error:[vue test utils]：options.stub值必须传递一个字符串或组件”。如果我通过

mocks

（其他的都一样，基本上都是

s/stubs:/mocks://

），我会得到与以前相同的

TypeError

。我已经更新了我的示例，在stub上包含了一个渲染函数。目前，vue test utils需要一个渲染函数来使存根有效（我们将解决这个问题，因为情况并非总是如此）。请使用我添加的示例再试一次，它应该可以像预期的那样工作，从而修复它。现在就写一篇关于GH的文章，谢谢！

const datepicker = {
    setCheckIn: () => {},
    setCheckOutDate: () => {},
    render: () => {}
}

it('sets a new end date', () => {
  const wrapper = shallow(DateRangeEditor, {
    stubs: {
      datepicker
    }
  })

  const date = new Date(2017, 11, 1)
  wrapper.vm.$refs.datepicker.$emit('checkOutChanged', date)
  expect(wrapper.vm.end).to.equal(date)
})