When is tsconfig.vitest.json used in a default vue@3 project?

Question

When I create a default vue@3 project (npm init vue@3), I get several tsconfig files. One of them is tsconfig.vitest.json. When does this file actually get used? I can see that it gets used for the "type check" (from package.json):

  "scripts": {
    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false"
  },

However, its name suggests that it should get used when you run Vitest itself. However I can't see anything that would cause Vitest to use this config file. The default name of the Vitest config file is vitest.config.ts. So precisely when, in what circumstances, is the file tsconfig.vitest.json used?

Answer 1

tsconfig.vitest.json is a typescript configuration file, it's only helpful for typescript, it doesn't change anything for running vitest.

This file is useful because you can have different typescript configurations between your app files and your test spec files. This is mostly desirable because your app files are running in a browser while tests are run in a node environment where they can have access to node APIs like fs.

Example:

// AppFile.js
import fs from 'fs' // will report a typescript error

// __tests__/myTest.spec.js
import fs from 'fs' // OK

It's this line in the tsconfig.vitest.json that allows the use of the node API:

"types": ["node", "jsdom"]