error TS2339: Property 'dataCy' does not exist on type 'cy & CyEventEmitter'

khteh commented 6 months ago

Software version

OS: Ubuntu 23.10 Node: v21.5.0 NPM: 10.3.0 Any other software related to your bug:

What did you get as the error?

 FAIL  src/components/__tests__/QuasarCheckComponents.spec.ts
  ● Test suite failed to run

    src/components/__tests__/QuasarCheckComponents.spec.ts:9:8 - error TS2339: Property 'dataCy' does not exist on type 'cy & CyEventEmitter'.

    9     cy.dataCy('checkbox').check();
             ~~~~~~
    src/components/__tests__/QuasarCheckComponents.spec.ts:10:8 - error TS2339: Property 'dataCy' does not exist on type 'cy & CyEventEmitter'.

    10     cy.dataCy('checkbox').should('be.checked');
              ~~~~~~
    src/components/__tests__/QuasarCheckComponents.spec.ts:12:8 - error TS2339: Property 'dataCy' does not exist on type 'cy & CyEventEmitter'.

    12     cy.dataCy('checkbox').uncheck();
              ~~~~~~
    src/components/__tests__/QuasarCheckComponents.spec.ts:13:8 - error TS2339: Property 'dataCy' does not exist on type 'cy & CyEventEmitter'.

    13     cy.dataCy('checkbox').should('not.be.checked');
              ~~~~~~
    src/components/__tests__/QuasarCheckComponents.spec.ts:21:8 - error TS2339: Property 'dataCy' does not exist on type 'cy & CyEventEmitter'.

    21     cy.dataCy('toggle').check();
              ~~~~~~
    src/components/__tests__/QuasarCheckComponents.spec.ts:22:8 - error TS2339: Property 'dataCy' does not exist on type 'cy & CyEventEmitter'.

    22     cy.dataCy('toggle').should('be.checked');
              ~~~~~~
    src/components/__tests__/QuasarCheckComponents.spec.ts:24:8 - error TS2339: Property 'dataCy' does not exist on type 'cy & CyEventEmitter'.

    24     cy.dataCy('toggle').uncheck();
              ~~~~~~
    src/components/__tests__/QuasarCheckComponents.spec.ts:25:8 - error TS2339: Property 'dataCy' does not exist on type 'cy & CyEventEmitter'.

    25     cy.dataCy('toggle').should('not.be.checked');
              ~~~~~~
    src/components/__tests__/QuasarCheckComponents.spec.ts:33:8 - error TS2339: Property 'dataCy' does not exist on type 'cy & CyEventEmitter'.

    33     cy.dataCy('radio-1').check();
              ~~~~~~
    src/components/__tests__/QuasarCheckComponents.spec.ts:34:8 - error TS2339: Property 'dataCy' does not exist on type 'cy & CyEventEmitter'.

    34     cy.dataCy('radio-1').should('be.checked');
              ~~~~~~
    src/components/__tests__/QuasarCheckComponents.spec.ts:36:8 - error TS2339: Property 'dataCy' does not exist on type 'cy & CyEventEmitter'.

    36     cy.dataCy('radio-2').check();
              ~~~~~~
    src/components/__tests__/QuasarCheckComponents.spec.ts:37:8 - error TS2339: Property 'dataCy' does not exist on type 'cy & CyEventEmitter'.

    37     cy.dataCy('radio-2').should('be.checked');
              ~~~~~~
    src/components/__tests__/QuasarCheckComponents.spec.ts:38:8 - error TS2339: Property 'dataCy' does not exist on type 'cy & CyEventEmitter'.

    38     cy.dataCy('radio-1').should('not.be.checked');
              ~~~~~~

What were you expecting?

No error running npm test

What steps did you take, to get the error?

Upgrade my quasar application to the latest libraries and ecosystem (https://github.com/quasarframework/quasar-testing/tree/dev/packages/unit-jest#upgrade-from-jest-ae-v2--quasar-v1) and run npm test

IlCallo commented 6 months ago

Hey there, are you sure you followed the upgrade guides while migrating from Cypress AE v4 to latest v5?

Both of these:

This seems a problem due to misconfiguration / poorly upgraded environment, as this problems isn't present into new installations AFAIK

khteh commented 6 months ago

Are you able to provide specifics of what I might miss? There are a lot to check.....

IlCallo commented 6 months ago

I honestly have no idea, have you tried generating a new project with latest Cypress AE and comparing the Cypress configuration files?

khteh commented 5 months ago

I made some progress. However, even starting with a fresh new quasar project installing the AE hits the following error:

 $ n test

> quasar-project@0.0.1 test
> jest

 FAIL  src/components/__tests__/VModelComponent.cy.ts
  ● Test suite failed to run

    ReferenceError: Cypress is not defined

    > 1 | import { vModelAdapter } from '@quasar/quasar-app-extension-testing-e2e-cypress';
        | ^
      2 | import { ref } from 'vue';
      3 | import VModelComponent from '../VModelComponent.vue';
      4 |

      at setupHooks (node_modules/cypress/vue/dist/cypress-vue.cjs.js:93:5)
      at Object.<anonymous> (node_modules/cypress/vue/dist/cypress-vue.cjs.js:8583:1)
      at Object.<anonymous> (node_modules/@quasar/quasar-app-extension-testing-e2e-cypress/src/helpers/install-quasar-plugin.ts:1:1)
      at Object.<anonymous> (node_modules/@quasar/quasar-app-extension-testing-e2e-cypress/src/helpers/main.ts:3:1)
      at Object.<anonymous> (src/components/__tests__/VModelComponent.cy.ts:1:1)

IlCallo commented 5 months ago

Are you're running Cypress tests with... Jest? How did you even manage to do that?

The scaffolding for Jest AE and Cypress AE are optimized to avoid mixing the 2 testing framework

As stated by the docs, these are the commands you should use to run Cypress tests

quasarframework / quasar-testing