Quasar jest test does not find elements with name tag

Question

I am trying to unit test my quasar application. I've managed to get started but am having a weird problem where the test is not finding elements with the name tag. The only components it DOES find are the q-route-tab components.

For some reason, the q-route-tab tests work, it finds any number of q-route-tabs I add. But it doesn't find any other component. I've tried various other components. The example below is using a q-item-label. This may be a bug in Quasar but just wanted to see if there is something I'm missing.

This is the NavBar component under test with the 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>

This is the actual unit test suite:

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

This is the output of the test:

 ● 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

I expect it's because q-item-label does not have a "name" field as part of its API.

Try:

<q-item>
<q-item-label ref="testLabel">Label</q-item-label>
</q-item>

And then:

expect(wrapper.find({ ref: "testLabel" }).exists()).toBe(true)