Quasar jest 测试找不到带有名称标签的元素
Quasar jest test does not find elements with name tag
我正在尝试对我的 quasar 应用程序进行单元测试。我已经设法开始了,但遇到了一个奇怪的问题,即测试没有找到带有名称标签的元素。它找到的唯一组件是 q-route-tab 组件。
出于某种原因,q-route-tab 测试有效,它可以找到我添加的任意数量的 q-route-tab。但它没有找到任何其他组件。我尝试了各种其他组件。下面的示例使用了 q-item-label。这可能是 Quasar 中的一个错误,但只是想看看我是否遗漏了什么。
这是使用 q-route-tabs 进行测试的 NavBar 组件
<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>
这是实际的单元测试套件:
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-label 没有 "name" 字段作为 its API 的一部分。
尝试:
<q-item>
<q-item-label ref="testLabel">Label</q-item-label>
</q-item>
然后:
expect(wrapper.find({ ref: "testLabel" }).exists()).toBe(true)
我正在尝试对我的 quasar 应用程序进行单元测试。我已经设法开始了,但遇到了一个奇怪的问题,即测试没有找到带有名称标签的元素。它找到的唯一组件是 q-route-tab 组件。
出于某种原因,q-route-tab 测试有效,它可以找到我添加的任意数量的 q-route-tab。但它没有找到任何其他组件。我尝试了各种其他组件。下面的示例使用了 q-item-label。这可能是 Quasar 中的一个错误,但只是想看看我是否遗漏了什么。
这是使用 q-route-tabs 进行测试的 NavBar 组件
<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>
这是实际的单元测试套件:
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-label 没有 "name" 字段作为 its API 的一部分。
尝试:
<q-item>
<q-item-label ref="testLabel">Label</q-item-label>
</q-item>
然后:
expect(wrapper.find({ ref: "testLabel" }).exists()).toBe(true)