Typeckecking tests in composite projects

[cexbrayat]

Currently (v3.1.4), the type-checking task uses the default tsconfig.json file, which excludes unit tests.

It would be nice to also typecheck tests: as a member of the VTU team, I can attest we spend a lot of time on the TypeScript support, so it would be sad to not check them by default 😄

Sadly, when running yarn typecheck -p tsconfig.vitest.json, the task fails with:

$ vue-tsc --noEmit -p tsconfig.vitest.json
incremental mode is not yet supported

/Users/cedric/Code/temp/test/node_modules/typescript/lib/tsc.js:99310
    function createIncrementalProgram(_a) { console.error('incremental mode is not yet supported'); throw 'incremental mode is not yet supported';
                                                                                                    ^
incremental mode is not yet supported

This leads to this issue in the Volar repo: vuejs/language-tools#787

Note that the last comment from @johnsoncodehk is to recommend using a single tsconfig.

So do you think the composite path is the best one? Maybe we should stick to a single tsconfig that checks tests and sources at the same time?

[cexbrayat]

FYI, the Angular CLI team rolled back the solution style tsconfig solution a while back due to various issues. See https://docs.google.com/document/d/1eB6cGCG_2ircfS5GzpDC9dBgikeYYcMxghVH5sDESHw/edit for the nerdy details

[haoqunjiang]

I've checked the Angular CLI document before implementing this feature. Most concerns seem to have been addressed and fixed in TypeScript as of now.
But the vue-tsc issue… Let me take some time to think about that further 🤔

[haoqunjiang]

composite can be turned off via command line:

vue-tsc --noEmit -p tsconfig.vitest.json --composite false

So I think we can work around this issue by adding that to the scripts.

[cexbrayat]

Could do the trick indeed.

It looks like I also need to duplicate:

    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },

in tsconfig.vitest.json to be able to use imports with @/components in tests. If that's expected, maybe that should be y default?

I can open a PR to fix all this.

[haoqunjiang]

• Most files in the project are compiled by Vite, they will be benefited from the solution-style tsconfigs due to more accurate types. And as the config is in the main tsconfig.json, the lack of composite support doesn't affect them;
• Other files such as vite.config.ts, cypress/plugins/index.ts can get better IDE auto-completion, but aren't type-checked in command-line by default, that's a pity, but I feel it's acceptable.
• Cypress Component Testing specs are still properly type-checked;
• Vitest specs aren't type-checked. I didn't expect that. But now that it can be worked around, I still think the trade-off is worth it.

[haoqunjiang]

in tsconfig.vitest.json to be able to use imports with @/components in tests. If that's expected, maybe that should be y default?

I can open a PR to fix all this.

Yeah. Didn't realize that. Thanks!

[cexbrayat]

I opened 2 PRs.

Even if it typechecks, it still looks like that VSCode (with Volar) does not understand an import with @/.
For example, it still complains if I updates HelloWorld.spec.ts with import HelloWorld from '@/components/HelloWorld.vue'

[haoqunjiang]

For example, it still complains if I updates HelloWorld.spec.ts with import HelloWorld from '@/components/HelloWorld.vue'

It works in my setup (both with the TypeScript Vue Plugin (Volar) and take-over mode).
Jump to definitions does not work without take-over mode, though. It is a known issue: vuejs/language-tools#435

[cexbrayat]

Right, it looks like I just needed to restart VSCode 🤦
Should be good once the PR are merged then!

[haoqunjiang]

Fixed in 3.1.5