Unit testing Quasar jest测试未找到带有名称标记的元素

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>

我正在尝试对我的quasar应用程序进行单元测试。我已经设法开始了,但是遇到了一个奇怪的问题,测试没有找到带有name标签的元素。它找到的唯一组件是q-route-tab组件

出于某种原因,q-route-tab测试可以工作,它可以找到我添加的任意数量的q-route-tab。但它找不到任何其他组件。我试过其他各种组件。下面的示例使用q项标签。这可能是Quasar中的一个bug,但我只是想看看我是否遗漏了什么

这是使用q-route-tabs测试的导航栏组件

<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)