如何使用带有 shallowMount 的 vue-test-utils 在单元测试期间查找元素组件?
How to find elementUi's componets during unit testing using vue-test-utils's with shallowMount?
看完vue-test-utils的文档,正在尝试动手
希望有人能解开我的困惑。
import { mount, shallowMount } from '@vue/test-utils'
import Vue from 'vue'
import Form from '@/components/Form/index.vue'
import ElementUI from 'element-ui'
Vue.use(ElementUI)
describe('Form.vue', () => {
//find it, pass
it('mount', () => {
const wrapper = mount(Form)
const elButton = wrapper.find('.el-button')
expect(elButton.isVueInstance()).toBe(true)
})
//can't find it, fail
it('shallowMount', () => {
const wrapper = shallowMount(Form)
const elButton = wrapper.find('.el-button')
expect(elButton.isVueInstance()).toBe(true)
})
})
我用'mount'的时候能找到elementui给的组件。
但也许有时我需要使用 'shallowMount'。
在这种情况下如何找到组件?
提前致谢。
感谢您的回答,
我找到了两种修复方法:
it('shallowMount', () => {
const wrapper = shallowMount(Form)
const elButton = wrapper.find(ElementUI.Button)
expect(elButton.isVueInstance()).toBe(true)
})
it('shallowMount', () => {
const wrapper = shallowMount(Form)
const elButton = wrapper.find({ name: 'ElButton' })
expect(elButton.isVueInstance()).toBe(true)
})
当您使用 shallowMount 时,子组件将被存根而不是渲染。这就是为什么你在第二次测试中找不到它的原因。
一种选择是像这里提到的那样做:https://lmiller1990.github.io/vue-testing-handbook/stubbing-components.html#automatically-stubbing-with-shallowmount
it('shallowMount', () => {
const wrapper = shallowMount(Form)
expect(wrapper.find(ElButtonComponent).exists()).toBe(true)
})
看完vue-test-utils的文档,正在尝试动手
希望有人能解开我的困惑。
import { mount, shallowMount } from '@vue/test-utils'
import Vue from 'vue'
import Form from '@/components/Form/index.vue'
import ElementUI from 'element-ui'
Vue.use(ElementUI)
describe('Form.vue', () => {
//find it, pass
it('mount', () => {
const wrapper = mount(Form)
const elButton = wrapper.find('.el-button')
expect(elButton.isVueInstance()).toBe(true)
})
//can't find it, fail
it('shallowMount', () => {
const wrapper = shallowMount(Form)
const elButton = wrapper.find('.el-button')
expect(elButton.isVueInstance()).toBe(true)
})
})
我用'mount'的时候能找到elementui给的组件。
但也许有时我需要使用 'shallowMount'。
在这种情况下如何找到组件?
提前致谢。
感谢您的回答, 我找到了两种修复方法:
it('shallowMount', () => {
const wrapper = shallowMount(Form)
const elButton = wrapper.find(ElementUI.Button)
expect(elButton.isVueInstance()).toBe(true)
})
it('shallowMount', () => {
const wrapper = shallowMount(Form)
const elButton = wrapper.find({ name: 'ElButton' })
expect(elButton.isVueInstance()).toBe(true)
})
当您使用 shallowMount 时,子组件将被存根而不是渲染。这就是为什么你在第二次测试中找不到它的原因。
一种选择是像这里提到的那样做:https://lmiller1990.github.io/vue-testing-handbook/stubbing-components.html#automatically-stubbing-with-shallowmount
it('shallowMount', () => {
const wrapper = shallowMount(Form)
expect(wrapper.find(ElButtonComponent).exists()).toBe(true)
})