Quasar jest测试找不到带有name标签的元素

Question

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

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

这是使用q- NavBar -tab进行测试的路由组件

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

Answer 1

我想这是因为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)