Why isn't my method being called after .trigger('click') using vue 3 composition api, vue test utils and vitest

Question

I have a test which is checking to see if a function was called on click

describe("Dropdown Component", () => {
  let wrapper;
  let selectedMeter = ref({});
  let store
  let isBouncing = ref(false);
  afterEach(() => {
   
   vi.clearAllMocks();
  });

  beforeEach(async () => {
    
    selectedMeter = ref({ meterId: "212312333", zeusId: 1 });
    isBouncing = ref(false);
    wrapper = mount(meterSelectVue, {
      global: {
        plugins: [
          createTestingPinia({
            initialState: {
              audit: {
                meterList: [
                  { meterId: "123", zeusId: 1 },
                  { meterId: "122345", zeusId: 2 },
                ],
                selectedMeter: { meterId: "212312333", zeusId: 1 },
                isMeterDataLoading: false,
                
              },
            },
            stubActions: false,
            createSpy: vi.fn,
          }),
          router,
        ],
      },
    });
    await router.isReady();
    store = useAuditStore();
  });
  it('calls selectMeter with correct meter when clicked', async () => {
    store = useAuditStore();

    selectedMeter = ref({ meterId: "9090909090", zeusId: 9090 });
    const spy = vi.spyOn(wrapper.vm, 'selectMeter');
    await flushPromises();
    await wrapper.vm.$forceUpdate();
    await wrapper.find("button").trigger("click");
    
    
    await wrapper.findAll("li").at(0).trigger("click");
    
    console.log(`here ${wrapper.findAll("li").at(0).text()}`)
    
    
    
    console.log(selectedMeter.value)
    expect(spy).toHaveBeenCalledOnce();
    expect(selectedMeter.value).toBe(store.selectedMeter);
});

my component code -

<div
        style="cursor: pointer"
        class="text-dbs-faded-grey mt-1 font-Poppins rounded bg-white absolute z-20 shadow-2xl w-[300px] sm:w-[350px]"
        v-if="show"
      >
        <!-- List of meters -->
        <ul
          class="list-none overflow-y-auto rounded max-h-96"
          id="shittyMeterList"
        >
          <!-- Loop through each meter in 'meters' array -->
          <li
            v-for="(meter, index) in meters"
            :key="index"
            :class="{ 'text-dbs-green2': meter === selectedMeter }"
          >
            <!-- Clickable link for each meter -->
            <a
              @click="selectMeter(meter), newMeter()"
              class="flex py-2 px-4 transition duration-300"
            >
              <!-- Static electricity bolt icon followed by meter ID -->
              <span class="mr-2">⚡</span> {{ meter.meterId }}
            </a>
          </li>
        </ul>
      </div>

the meters are rendered correctly confirmed with console logs but the functions are not called and my store isn't manipulated. I can call await wrapper.vm.selectMeter(selectedMeter.value) and get the desired result, but that defeats the purpose of the test

Answer 1

if you want to run some method after the component has been mounted, consider using onMounted function.

https://vuejs.org/api/composition-api-lifecycle.html#onmounted