Vue Jest - Unable to get element

Question

I'm using Jest for testing my Vue component

This is the error I'm getting

FAIL  src/__tests__/header/HeaderUtility.spec.js

● HeaderUtility › correctly applies the link

Unable to get a[data-testid="utility-item"] within: <nav class="header-utility">
  <div class="lhn-wrapper">
    <nav class="left-hand-nav" nav-items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]">
      <!---->
    </nav>
  </div>
</nav>

  26 |
  27 |   it('correctly applies the link', () => {
> 28 |     expect(wrapper.get(`a[data-testid="utility-item"]`).wrapperElement.href).toBe(`${props.utility[0].link}`);
     |                    ^
  29 |   });
  30 |
  31 |   it('correctly applies the label', () => {

  at VueWrapper.get (node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:7371:15)
  at Object.<anonymous> (src/__tests__/header/HeaderUtility.spec.js:28:20)

● HeaderUtility › correctly applies the label

Cannot call text on an empty DOMWrapper.

  30 |
  31 |   it('correctly applies the label', () => {
> 32 |     expect(wrapper.find('p[data-testid="menu-label"]').text()).toBe(
     |            ^
  33 |       `${props.utility[0].label}`
  34 |     );
  35 |   });

And here's the test file

import { mount } from '@vue/test-utils';
import HeaderUtility from '@/components/header/HeaderUtility.vue';

describe('HeaderUtility', () => {
  let wrapper;
  const props = {
    user: true,
    utility: [
      {
        label: 'My label',
        link: 'www.somelink.com',
        id: 'utility-user',
        icon: 'user',
      },
    ],
  };

  beforeAll(async () => {
    wrapper = mount(HeaderUtility, { props });
    await wrapper.vm.$router.isReady();
  });

  it('matches a previous snapshot', () => {
    expect(wrapper.html()).toMatchSnapshot();
  });

  it('correctly applies the link', () => {
    expect(wrapper.get('a[data-testid="utility-item"]').wrapperElement.href).toBe(`${props.utility[0].link}`);
  });

  it('correctly applies the label', () => {
    expect(wrapper.find('p[data-testid="menu-label"]').text()).toBe(
      `${props.utility[0].label}`
    );
  });

  afterAll(() => {
    wrapper.unmount();
  });
});

And here's the HeaderUtility component that I'm trying to test

The lines the test is throwing the 2 errors are line 7 and line 24 of the below file

<template>
  <nav class="header-utility">
    <UnorderedList :horizontal="true" class="wrapper-utility-items">
      <li v-for="(item, index) in utility" :key="index" class="utility-item">
        <a
          :id="item.id"
          data-testid="utility-item"
          class="green secondary"
          :href="user ? (item.LHNToggle ? '#' : item.link) : '#'"
          @click="user ? LHNtoggled(item.LHNToggle, index) : ''">
          <Icon
            :icon-key="item.icon"
            icon-size="l"
            :color-key="
              user
                ? selected === index
                  ? 'tint-green'
                  : 'white'
                : 'transparent-dark-grey'
            " />
        </a>
        <p
          class="menu-label"
          data-testid="menu-label"
          @click="selected === index ? (selected = null) : (selected = index)"
          v-html="item.label" />
      </li>
      <li
        class="utility-cart-item"
        @click="selected === 3 ? (selected = null) : (selected = 3)">
        <Cart
          :user="user"
          :icon-color-key="
            user
              ? selected === 3
                ? 'tint-green'
                : 'white'
              : 'transparent-dark-grey'
          " />
      </li>
    </UnorderedList>
    <div :class="['lhn-wrapper', { open: toggleLHN }]">
      <LeftHandNav :nav-items="leftHandNavOptions" />
    </div>
  </nav>
</template>

<script>
  import { ref, defineAsyncComponent } from 'vue';
  import gettext from '@/gettext';
  import { ArrayValidator, ObjectValidator } from '@/util/validators';
  import LeftHandNav from '@/components/LeftHandNav';
  import Cart from '@/components/header/Cart';

  export default {
    name: 'HeaderUtility',
    components: {
      Icon: defineAsyncComponent(() =>
        import(/* webpackChunkName: "Icon" */ '@/components/base/Icon')
      ),
      UnorderedList: defineAsyncComponent(() =>
        import(
          /* webpackChunkName: "UnorderedList" */ '@/components/base/UnorderedList'
        )
      ),
      LeftHandNav,
      Cart,
    },
    setup() {
      const { $gettext } = gettext;
      const selected = ref(null);
      return {
        toggleLHN,
        selected,
      };
    },
    props: {
      user: {
        type: Object,
        required: false,
        validator: ObjectValidator,
      },
      utility: {
        type: Array,
        required: true,
        validator: ArrayValidator,
      },
    },
  };
</script>

But this test runs successfully when the lines from 28-40 in HeaderUtility component are commented out, which is this bit of code

      <li
        class="utility-cart-item"
        @click="selected === 3 ? (selected = null) : (selected = 3)">
        <Cart
          :user="user"
          :icon-color-key="
            user
              ? selected === 3
                ? 'tint-green'
                : 'white'
              : 'transparent-dark-grey'
          " />
      </li>

Could anyone please help me with this?