Vue.js 测试在逐个运行时通过,但测试套件抛出错误
我试图测试表单组件的行为。我有以下测试套件:Vue.js 测试在逐个运行时通过,但测试套件抛出错误,vue.js,jestjs,nuxt.js,vue-test-utils,Vue.js,Jestjs,Nuxt.js,Vue Test Utils,我试图测试表单组件的行为。我有以下测试套件: import {createLocalVue, mount} from '@vue/test-utils' import formDiscovery from '../pages/Discovery' import Vuex from 'vuex' import Buefy from 'buefy' import VeeValidate, {Validator} from 'vee-validate' import * as moduleContac
import {createLocalVue, mount} from '@vue/test-utils'
import formDiscovery from '../pages/Discovery'
import Vuex from 'vuex'
import Buefy from 'buefy'
import VeeValidate, {Validator} from 'vee-validate'
import * as moduleContactInfos from '../store/contactInfos'
import * as moduleCompanyInfos from '../store/companyInfos'
import fr from 'vee-validate/dist/locale/fr'
let wrapper, store
beforeEach(() => {
const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(VeeValidate)
Validator.localize('fr', fr)
localVue.use(Buefy)
store = new Vuex.Store({
modules: {
contactInfos: moduleContactInfos,
companyInfos: moduleCompanyInfos
}
})
wrapper = mount(formDiscovery, {
localVue,
store,
stubs: ['router-link']
});
})
/*
This test suite tests if a field is shown when the user selects a specific option in a select input
and that this field is hidden when any other option is selected
*/
describe("field 'more details'", () => {
it("is shown when the 'Other: specify' select option is selected", () => {
wrapper.vm.$data.choiceCompanyInfos = 'Other: specify'
wrapper.vm.$nextTick(() => {
const input = wrapper.find('#moreDetails')
expect(input.isVisible()).toBeTruthy()
})
})
it('is hidden when a valid select option is selected', () => {
wrapper.vm.$data.choiceCompanyInfos = 'A valid select option'
wrapper.vm.$nextTick(() => {
const input = wrapper.find('#moreDetails')
expect(input.isVisible()).toBeFalsy()
})
})
})
/*
This test suite tests is veevalidate generates the correct error messages
*/
describe('vee validate', () => {
it('adds an error when a required form field is empty', async () => {
const input = wrapper.find('[name="phone"]')
expect(input.exists()).toBe(true)
expect(wrapper.vm.errors.count()).toBe(0)
store.commit('contactInfos/updatePhone', '')
await wrapper.vm.$validator.validate('phone')
expect(wrapper.vm.errors.count()).toBe(1)
})
it('adds an error when the phone has an invalid format', async () => {
const input = wrapper.find('[name="phone"]')
expect(input.exists()).toBe(true)
expect(wrapper.vm.errors.count()).toBe(0)
store.commit('contactInfos/updatePhone', '6156') // Valid format : 0?[0-9]{9}
await wrapper.vm.$validator.validate('phone')
expect(wrapper.vm.errors.count()).toBe(1)
expect(wrapper.vm.errors.first('phone').indexOf('invalid')).toBeGreaterThan(-1) // The error message must contains 'invalid'
})
})
被测组件包含多个嵌套子组件(包含buefy标签和buefy输入等的表单字段)
它还包含两个nuxt链接组件
当我单独运行一个测试时,它是有效的。但是,如果尝试运行描述套件或整个文件,则会出现以下错误:
TypeError: Cannot read property '$scopedSlots' of undefined
at updateChildComponent (.\node_modules\vue\dist\vue.common.dev.js:4100:27)
at prepatch (.\node_modules\vue\dist\vue.common.dev.js:3128:5)
我尝试为每个测试重新创建存储,为每个测试创建一个新的localVue实例。没用。有什么想法吗?我在安装组件时遇到了同样的错误,并使用
sync:false
解决了这个问题。因此,在您的情况下,只需遵循以下代码
wrapper = mount(formDiscovery, {
sync: false,
localVue,
store,
stubs: ['router-link']
});
不知道你找到了如何解决这个问题,我现在的处境和你一样..不,我有理由现在不写这个项目的测试