Unit testing Quasar jest测试未找到带有名称标记的元素
我正在尝试对我的quasar应用程序进行单元测试。我已经设法开始了,但是遇到了一个奇怪的问题,测试没有找到带有name标签的元素。它找到的唯一组件是q-route-tab组件 出于某种原因,q-route-tab测试可以工作,它可以找到我添加的任意数量的q-route-tab。但它找不到任何其他组件。我试过其他各种组件。下面的示例使用q项标签。这可能是Quasar中的一个bug,但我只是想看看我是否遗漏了什么 这是使用q-route-tabs测试的导航栏组件Unit testing Quasar jest测试未找到带有名称标记的元素,unit-testing,vue.js,jestjs,quasar,Unit Testing,Vue.js,Jestjs,Quasar,我正在尝试对我的quasar应用程序进行单元测试。我已经设法开始了,但是遇到了一个奇怪的问题,测试没有找到带有name标签的元素。它找到的唯一组件是q-route-tab组件 出于某种原因,q-route-tab测试可以工作,它可以找到我添加的任意数量的q-route-tab。但它找不到任何其他组件。我试过其他各种组件。下面的示例使用q项标签。这可能是Quasar中的一个bug,但我只是想看看我是否遗漏了什么 这是使用q-route-tabs测试的导航栏组件 <template>
<template>
<div>
<q-item>
<q-item-label name="testLabel">Label</q-item-label>
</q-item>
<q-tabs
v-model="tab"
class="text-white shadow-2"
>
<q-route-tab
name="homeTab"
icon="ion-home"
label="Home"
to="/home-layout/home"
>
<q-badge
color="red"
floating
>2</q-badge>
</q-route-tab>
<q-route-tab
name="membersTab"
icon="ion-person"
label="Members"
to="/home-layout/members"
/>
<q-route-tab
name="groupsTab"
label="Groups"
icon="ion-people"
to="/home-layout/groups/false"
>
</q-route-tab>
<q-route-tab
name="eventsTab"
icon="ion-calendar"
label="Events"
to="/home-layout/events"
/>
</q-tabs>
</div>
</template>
我想这是因为q-item-label没有“name”字段作为其一部分 尝试:
import { mount, createLocalVue, shallowMount } from 'test-utils'
import Navbar from '../../../src/Components/NavBar.vue'
import * as All from 'quasar'
// import langEn from 'quasar/lang/en-us' // change to any language you wish! => this breaks wallaby :(
const { Quasar, date } = All
const components = Object.keys(All).reduce((object, key) => {
const val = All[key]
if (val && val.component && val.component.name != null) {
object[key] = val
}
return object
}, {})
describe('Mount Quasar', () => {
const localVue = createLocalVue()
localVue.use(Quasar, { components }) // , lang: langEn
const wrapper = mount(Navbar, {
localVue,
stubs: ['router-link', 'router-view']
})
const vm = wrapper.vm
it('passes the sanity check and creates a wrapper', () => {
expect(wrapper.isVueInstance()).toBe(true)
})
it('checks if all tabs are there', () => {
// test will automatically fail if an exception is thrown
expect(wrapper.find({ name: "homeTab" }).exists()).toBe(true)
expect(wrapper.find({ name: "membersTab" }).exists()).toBe(true)
expect(wrapper.find({ name: "groupsTab" }).exists()).toBe(true)
expect(wrapper.find({ name: "eventsTab" }).exists()).toBe(true)
expect(wrapper.find({ name: "testLabel" }).exists()).toBe(true) <---This fails
})
})
● Mount Quasar › checks if all tabs are there
expect(received).toBe(expected) // Object.is equality
Expected: true
Received: false
39 | expect(wrapper.find({ name: "groupsTab" }).exists()).toBe(true)
40 | expect(wrapper.find({ name: "eventsTab" }).exists()).toBe(true)
> 41 | expect(wrapper.find({ name: "testLabel" }).exists()).toBe(true)
| ^
42 | })
43 | })
44 |
at Object.toBe (test/jest/__tests__/NavBar.spec.js:41:63)
Test Suites: 1 failed, 2 passed, 3 total
Tests: 1 failed, 9 passed, 10 total
Snapshots: 0 total
Time: 3.299s
Ran all test suites.
<q-item>
<q-item-label ref="testLabel">Label</q-item-label>
</q-item>
expect(wrapper.find({ ref: "testLabel" }).exists()).toBe(true)