TypeError: Cannot read properties of undefined (reading 'desktop') when awaiting a button click in a jest test.

[MarkTallentire]

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "TypeError: Cannot read properties of undefined (reading 'desktop')".] { code: 'ERR_UNHANDLED_REJECTION'

Using Node V16 which now forces handling of rejections.

Test (No assertions due to trying to debug this, however we have tried asserting the error on the actual await using a catch block)

 it('should render a list of amendments when the dropdown is opened', async () => {
    const dropDownButton = wrapper.find('.q-btn__content');
    await wrapper.trigger('click', dropDownButton);
  });

Component being tested:

<template>
  <q-btn-dropdown
    v-model="amendmentDropdownState"
    flat
    :label="`Amendment: ${store.selectedAmendment.name}`"
  >
    <q-list>
      <q-item
        v-for="amendment in Amendments"
        :key="amendment.id"
        v-close-popup
        clickable
        @click="changeSelectedAmendment(amendment)"
      >
        <q-item-section>{{ amendment.name }}</q-item-section>
      </q-item>
    </q-list>
  </q-btn-dropdown>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Amendment, Amendments } from 'src/models/AppState/Amendments';
import { useStore } from 'src/stores/AppState';

const store = useStore();
const amendmentDropdownState = ref(false);

const changeSelectedAmendment = (amendment: Amendment) => {
  store.selectedAmendment = amendment;
};
</script>

We've been having serious issues doing any testing on components in Quasar and are seriously ready to give up, please help :(

[IlCallo]

Hi @MarkTallentire, sorry for late response There may be multiple causes to your problem, can you create a repro for us to take a look at? As example, it's not clear where that reading of desktop is coming from, it may be related to how you setup your tests If you get it into all components, it's probably something used into a common place for all of those, eg. the store you're importing

[MarkTallentire]

@IlCallo Give me a few days, I'm away from my machines till Saturday but happy to upload our repo for you when I'm back

[IlCallo]

No problem, I'm focusing on Cypress Component Testing support right now, as I find it a far superior choice for component testing if compared with Jest, so I probably won't be able to check and fix this before a couple weeks unluckily

[MarkTallentire]

No worries, we've swapped to using cypress for everything at this point and we'll go back and revisit jest in the future but we needed to get our project going.

[mikecancelosi]

I'm having the same issue trying to test a component with q-select. Is the workaround to just use Cypress over jest for the time being? From the Quasar documentation, it seems that support for Cypress component testing isn't finished. Wouldn't want to make the switch if it's just going to have different issues.

[MarkTallentire]

@IlCallo See https://github.com/quasarframework/quasar-testing/issues/192 for an example repo, not mine but someone else seems to have the same issue.

[IlCallo]

While we find the time to check out these Jest problems, we just released a new version of Cypress AE with Component Testing support, try it out!

https://github.com/quasarframework/quasar-testing/releases/tag/e2e-cypress-v4.0.0-beta.7

[IlCallo]

Hey there, could you check if this comment and [this new release] (https://github.com/quasarframework/quasar-testing/releases/tag/unit-jest-v3.0.0-alpha.7) solve your problem?

Check the migration guide as you'll need to manually update the jest.config.js scaffolded file to apply the fix

[IlCallo]

Closing for now, as I expect latest release to fix this Let us know if the issue has been actually solved