fix: vitest tsconfig should include all files under src

[haoqunjiang]

Credit to @xiaoxiangmoe

Fixes #55

Fixes the case that a .spec.ts file inside __test__/ imports a
module outside of __test__/ (a cross-(typescript-)project reference).

Note that VSCode language service looks for include patterns in references
top-down, so tsconfig.app.json must come before tsconfig.vitest.json
so that the src/** modules can get the most-accurate type hints.

The previous tsconfig only works for .vue imports in .spec.ts, which
seems to be a Volar bug. We shouldn't rely on that.
This fix is a more accurate configuration.

Vitest TypeScript projects created prior to create-vue 3.1.6 can apply the following patch to the projects:

From a37c33facf0e5db767bee33a71ad9e9fcd3cf373 Mon Sep 17 00:00:00 2001 From: Haoqun Jiang <haoqunjiang@gmail.com> Date: Tue, 15 Feb 2022 21:50:07 +0800 Subject: [PATCH] fix: vitest tsconfig --- package.json | 2 +- tsconfig.app.json | 12 ++++++++++++ tsconfig.json | 14 ++++---------- tsconfig.vitest.json | 9 +++------ 4 files changed, 20 insertions(+), 17 deletions(-) create mode 100644 tsconfig.app.json diff --git a/package.json b/package.json index ad9e16d..5138df6 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "build": "vue-tsc --noEmit && vite build", "preview": "vite preview --port 5050", "test:unit": "vitest --environment jsdom", - "typecheck": "vue-tsc --noEmit && vue-tsc --noEmit -p tsconfig.vitest.json --composite false", + "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false", "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore" }, "dependencies": { diff --git a/tsconfig.app.json b/tsconfig.app.json new file mode 100644 index 0000000..cdbea1d --- /dev/null +++ b/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "@vue/tsconfig/tsconfig.web.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/tsconfig.json b/tsconfig.json index 2551bf2..24f21b0 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,18 +1,12 @@ { - "extends": "@vue/tsconfig/tsconfig.web.json", - "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], - "exclude": ["src/**/__tests__/*"], - "compilerOptions": { - "baseUrl": ".", - "paths": { - "@/*": ["./src/*"] - } - }, - + "files": [], "references": [ { "path": "./tsconfig.vite-config.json" }, + { + "path": "./tsconfig.app.json" + }, { "path": "./tsconfig.vitest.json" } diff --git a/tsconfig.vitest.json b/tsconfig.vitest.json index 5667568..d080d61 100644 --- a/tsconfig.vitest.json +++ b/tsconfig.vitest.json @@ -1,12 +1,9 @@ { - "extends": "@vue/tsconfig/tsconfig.node.json", - "include": ["src/**/__tests__/*"], + "extends": "./tsconfig.app.json", + "exclude": [], "compilerOptions": { "composite": true, - "baseUrl": ".", - "paths": { - "@/*": ["./src/*"] - }, + "lib": [], "types": ["node", "jsdom"] } } --  2.35.1 

[haoqunjiang]

Cc @cexbrayat I think you might be interested in this fix, too…

[cexbrayat]

Hmm interesting, that's what we were missing.

One question though: where does ts know that .spec.ts are included now? they are excluded in tsconfig.app.json and never included?

[haoqunjiang]

One question though: where does ts know that .spec.ts are included now? they are excluded in tsconfig.app.json and never included?

tsconfig.vitest.json now extends from tsconfig.app.json and overwrites exclude to []. So now the project (tsconfig.vitest.json) includes all files under src/**

So now:

• When type-checking src/utils.ts, VSCode language service will search project reference, and the file is matched by the first tsconfig in the array, tsconfig.app.json, which is the same behavior as previous;
• When type-checking src/__tests__/utils.spec.ts and it encounters the import for ../utils.ts, TypeScript would also use the ts configuration of utils.spec.ts for the imported module. Now that tsconfig.vitest.json includes all files under src, it no longer complains.

[xiaoxiangmoe]

cypress-ct should also add vitest style tsconfig.app.json and tsconfig.cypress-ct.json.
If we don't add this:

• file src/App.vue and file src/__tests__/utils.spec.ts will be matched in same tsconfig.
• src/__tests__/utils.spec.ts have code import { mount } from '@cypress/vue', it will introduce global variables like it, describe and so on.
• src/App.vue will be able to use global variable it, describe.

So we should split tsconfig to prevent global variables pollution.

[paparent]

Regarding global variable pollution, I managed to do this in my tsconfig.vitest.json:

{ "extends": "@vue/tsconfig/tsconfig.node.json", "include": ["test-setup.ts", "src/**/__tests__/*"], "compilerOptions": { "composite": true, "baseUrl": ".", "paths": { "@/*": ["./src/*"] }, "types": ["node", "jsdom", "vitest/globals"] } }

having vitest/globals in the types.

I like having different tsconfig files, but it gets confusing!

[haoqunjiang]

cypress-ct should also add vitest style tsconfig.app.json and tsconfig.cypress-ct.json.

Makes sense. Let me merge this PR and release a patch first. And I'll fix the Cypress-CT issue in another PR. At least it is still working…