Note that VSCode language service looks forinclude patterns inreferences
top-down, sotsconfig.app.json must come beforetsconfig.vitest.json
so that thesrc/** 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 tocreate-vue 3.1.6 can apply the following patch to the projects:

From a37c33facf0e5db767bee33a71ad9e9fcd3cf373 Mon Sep 17 00:00:00 2001From: Haoqun Jiang <haoqunjiang@gmail.com>Date: Tue, 15 Feb 2022 21:50:07 +0800Subject: [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.jsondiff --git a/package.json b/package.jsonindex 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.jsonnew file mode 100644index 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.jsonindex 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.jsonindex 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

fix: vitest tsconfig should include all files undersrc

3e61e13

Fixesvuejs#55Fixes the case that a `.spec.ts` file inside `__test__/` imports amodule outside of `__test__/` (a cross-(typescript-)project reference).Note that TypeScript 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`, whichseems to be a Volar bug. We shouldn't rely on that.This fix is a more accurate configuration.

Copy link

MemberAuthor

haoqunjiang commentedFeb 15, 2022

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

haoqunjiang mentioned this pull request

Feb 15, 2022

Projects must list all files or use an 'include' pattern.ts(6307)#55

Closed

Copy link

Member

cexbrayat commentedFeb 15, 2022

Hmm interesting, that's what we were missing.

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

fix: typo

d0dfd8c

Copy link

MemberAuthor

haoqunjiang commentedFeb 15, 2022•
edited
Loading

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

tsconfig.vitest.json now extends fromtsconfig.app.json and overwritesexclude to[]. So now the project (tsconfig.vitest.json) includes all files undersrc/**

So now:

When type-checkingsrc/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-checkingsrc/__tests__/utils.spec.ts and it encounters the import for../utils.ts, TypeScript would also use the ts configuration ofutils.spec.ts for the imported module. Now thattsconfig.vitest.json includes all files undersrc, it no longer complains.

Copy link

Contributor

xiaoxiangmoe commentedFeb 15, 2022

cypress-ct should also add vitest styletsconfig.app.json andtsconfig.cypress-ct.json.
If we don't add this:

filesrc/App.vue and filesrc/__tests__/utils.spec.ts will be matched in same tsconfig.
src/__tests__/utils.spec.ts have codeimport { mount } from '@cypress/vue', it will introduce global variables likeit,describe and so on.
src/App.vue will be able to use global variableit,describe.

So we should split tsconfig to prevent global variables pollution.

Copy link

paparent commentedFeb 15, 2022

Regarding global variable pollution, I managed to do this in mytsconfig.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"]  }}