Out-the-box setup not working with Vite and TypeScript

[KrisCarr]

Software version

OS: Windows 10 and macOS Node: 14, 16 and 18 NPM: whatever is currently shipping with the above Any other software related to your bug:

What did you get as the error?

Various, see steps below for specifics.

In brief, in the auto-generated example tests:

• Isolated modules error
• Cannot find describe, it etc
• Cannot find cy.dataCy or other commands provided by the AE
• Coincidentally, component tests also cannot find implicit augmentations from cypress/vue such as Cypress.vueWrapper

What were you expecting?

If Typescript support was chosen during the AE installation for out-the-box setup, it should be configured correctly and pick up the augmentations / implicit imports in the example test files.

Currently using a temporary workaround adding explicit tsconfig settings, see bottom.

What steps did you take, to get the error?

Starting completely from scratch and running the following commands, choosing Typescript and Vite, also choosing TypeScript and additional scripts for the extension:

yarn create quasar
yarn quasar ext add @quasar/testing-e2e-cypress

then adding the eslint overrides array as documented.

Does not produce a working system. The integration "home" test file cries with:

TS1208: 'home.spec.ts' cannot be compiled under '--isolatedModules' because it is considered a global script file.

Adding "isolatedModules": false to tsconfig leads to:

TS2593: Cannot find name 'describe'. Do you need to install type definitions for a test runner?

The component tests seem to get further thanks to the import { mount } from '@cypress/vue'; line at the top and can see describe etc but also fail with:

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

Current workaround

Setting "isolatedModules": false and adding an explicit types array of ["@quasar/quasar-app-extension-testing-e2e-cypress"] into tsconfig.json seems to sort it.

Not sure if this will cause problems elsewhere or not.

[IlCallo]

Thanks, seems like this is linked to #256 I thought it was a problem of our monorepo setup, instead it's a TS problem due to app-vite provided tsconfig preset

To workaround this, while we decide how to tackle the root issue, redefine "types" property into your project tsconfig as

"compilerOptions": {
    "types": [
      "vite/client",
      "node",
      "@quasar/quasar-app-extension-testing-e2e-cypress"
    ]
},

[yusufkandemir]

https://www.typescriptlang.org/tsconfig#isolatedModules

If isolatedModules is set, all implementation files must be modules (which means it has some form of import/export). An error occurs if any file isn’t a module.

As can be seen here, the "problematic" file doesn't have any import or export statements, thus causing the TS error. https://github.com/quasarframework/quasar-testing/blob/06557ce1f8457e8d8c0e21fe55c63b073d6ed7b9/packages/e2e-cypress/src/templates/typescript/test/cypress/integration/home.spec.ts#L1-L16

The isolatedModules option is needed for Vite: https://vitejs.dev/guide/features.html#typescript-compiler-options https://vuejs.org/guide/typescript/overview.html#configuring-tsconfig-json

So, we need to either create a different tsconfig to run the tests and hope it doesn't break anything else. Or, better, mention this in our docs and add export {} to the related file to avoid this problem.

[IlCallo]

@KrisCarr while we decide how to handle the e2e tests with isolated modules option, check out if deleting "include" tsconfig option works fine to remove TS errors, as it did for us

You shouldn't need "types" option either at that point

[IlCallo]

Seems like adding export {}; at the end of e2e test files will do the trick for now, we'll search for a cleaner solution As for missing Cypress typings, they now work as intended since last update to the quasar starter kit to fix the scaffolded tsconfig

[IlCallo]

Temporary fix has been released into 4.1.3 to avoid errors upon first setup