vue-test-utils:Vue 子组件方法 "is not a function"
vue-test-utils: Vue child-component method "is not a function"
在此测试中,我只是试图断言 end
属性 已在被测组件 (DateRangeEditor
) 上设置。该组件假定 this.$refs.datepicker
是 HotelDatepicker
的一个实例,并调用它的 setCheckOut
和 setCheckIn
方法(如果有更好的方法,请告诉我!)。 =24=]
该组件在浏览器中正常加载时可以正常工作,但我对 setEndDate
的测试失败并显示 "TypeError: this.$refs.datepicker.setCheckIn is not a function"。
我是不是误解了设置 stubs
选项应该做什么? 我认为这样的场景,调用代码只需要调用存根函数并且不需要特定的结果,这正是存根的用途。是我用错了吗?
这是我的测试:
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>
最后,这是我的 setup.js bootstrap 文件:
/* globals global */
require('jsdom-global')()
const chai = require('chai')
const sinon = require('sinon')
// use Sinon test spies/stubs/mocks in all tests
chai.use(require('chai-sinon'))
// expose libs to all tests
global.chai = chai
global.sinon = sinon
global.expect = chai.expect
版本 n 东西
- @vue/test-utils^1.0.0-beta.10
- vue ^2.4.4
stubs
替换子组件方法。这就是您收到错误的原因。
如果要检查是否正在调用某个方法,可以使用这些方法创建一个组件并将其传递到 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)
})
在此测试中,我只是试图断言 end
属性 已在被测组件 (DateRangeEditor
) 上设置。该组件假定 this.$refs.datepicker
是 HotelDatepicker
的一个实例,并调用它的 setCheckOut
和 setCheckIn
方法(如果有更好的方法,请告诉我!)。 =24=]
该组件在浏览器中正常加载时可以正常工作,但我对 setEndDate
的测试失败并显示 "TypeError: this.$refs.datepicker.setCheckIn is not a function"。
我是不是误解了设置 stubs
选项应该做什么? 我认为这样的场景,调用代码只需要调用存根函数并且不需要特定的结果,这正是存根的用途。是我用错了吗?
这是我的测试:
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>
最后,这是我的 setup.js bootstrap 文件:
/* globals global */
require('jsdom-global')()
const chai = require('chai')
const sinon = require('sinon')
// use Sinon test spies/stubs/mocks in all tests
chai.use(require('chai-sinon'))
// expose libs to all tests
global.chai = chai
global.sinon = sinon
global.expect = chai.expect
版本 n 东西
- @vue/test-utils^1.0.0-beta.10
- vue ^2.4.4
stubs
替换子组件方法。这就是您收到错误的原因。
如果要检查是否正在调用某个方法,可以使用这些方法创建一个组件并将其传递到 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)
})