Typescript warns that a .svelte file import into a test file doesn't exist.

[manuganji]

Describe the bug

I'm getting typescript warnings that a .svelte file that I'm importing in a test file doesn't exist. But vitest runs fine. It seems to work if I add an includes in the project tsconfig.json to

"include": [
    "./.svelte-kit/ambient.d.ts",
    "src/**/*.js",
    "src/**/*.ts",
    "src/**/*.svelte",
    "src/**/*.js",
    "src/**/*.ts",
    "src/**/*.svelte",
    "test/**/*.ts",
    "test/**/*.js",
    "test/**/*.svelte"
  ],

and relaunch VS Code. But I'm wondering why test directory wasn't included in .svelte-kit/tsconfig.json in the first place.

Reproduction

https://github.com/manuganji/sjsf/tree/17b0742b3d25347a6c4be2186a7bd8f568ea32ae

Logs

No response

System Info

System:
    OS: macOS 12.1
    CPU: (8) x64 Apple M1
    Memory: 30.89 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 8.10.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Browsers:
    Chrome: 104.0.5112.79
    Firefox: 100.0.2
    Safari: 15.2
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.63 
    @sveltejs/kit: next => 1.0.0-next.403 
    svelte: ^3.44.0 => 3.49.0 
    vite: ^3.0.0 => 3.0.3

Severity

annoyance

Additional Information

No response

[dummdidumm]

It's not added because all the code is inside src - or rather, we thought that is what everyone does. You added another top level folder, so you need to adjust the tsconfig yourself. It sucks that there's no mechanism to tell tsconfig to "add these includes in addition to the ones from extends", so right now your solution is the only one that's working. We can't do "use all files in the current directory" because that also includes those from node_modules, the .svelte-kit folder and others which you might not want to have included.

Leaving this open for another maintainer to give their opinion on this (specifically, if we should adjust the includes/excludes of the generated tsconfig with a blacklist instead of a whitelist), but I say that there's unfortunately nothing we can do about this.

The reason why you get this warning is that test is not in the includes config, so it creates a separate typechecking project which has no knowledge of the ambient type definitions which link to a definition which marks all *.svelte files as something that exists.

[manuganji]

Hi @dummdidumm I interpreted this section in docs - https://kit.svelte.dev/docs/project-structure#other-files-test - to mean that tests should be inside a test directory, a sibling to src. Would it all work if I just moved this test folder inside src?

[dummdidumm]

Huh, didn't know about that. That definitely changes things to some extend. I don't know how that got in there, but if we have that convention and it goes into test and not src/test, I definitely agree that it should work there - waiting on input from other maintainers.

[dominikg]

Extending a generated tsconfig.json that contains fields which are not merged (include/exclude) and overridden if the user defines them in the top-level tsconfig.json seems dangerous.

If we keep doing this i suggest two changes to avoid users running into this at large

1. the generated includes should cover every directory created as part of the template from create-svelte.
2. add a warning comment in the root tsconfig.json that adding include/exclude will break things unless you manually copy the values from the generated config

But ideally we find a solution that avoids doing so entirely.

1. put include and exclude in the top level tsconfig instead (breaking change)
2. make use of https://www.typescriptlang.org/docs/handbook/project-references.html, have the root tsconfig.json be a pure list of references, accompanied by tsconfig-XXX.json and or src/tsconfig.json test/tsconfig.json linking back to the generated config

[dummdidumm]

Since we're using the tsconfig.json primarily for type-checking and not for the actual build, and since I guess that Vite wants a tsconfig next to its config file, I think the less risky move is to go with option 1 and enhance the tsconfig.json to include the test directory + add a note to the config.