Our TypeScript config for our vitest specs appears to be correct, because there's no red lines anywhere (we use jest forms like toEqual
even though I think vitest "prefers" chai's to.equal
and it seems to be fine with that).
However, WebStorm still has issues with RTL's toBeInTheDocument
. Adding import '@testing-library/jest-dom'
to the top of my file satisfies TypeScript on that one but it's still showing up white with a squiggle:
It doesn't have any real effect, it's just annoying for me to see this as my eyes move about the code. What can I do about this?
FYI our tsconfig.spec.json
:
{
"extends": "./tsconfig.json",
"compilerOptions": {
"types": ["vitest/globals", "vitest/importMeta", "vite/client", "node"]
},
"include": ["./*.d.ts", "./src/**/*.spec.ts", "./src/**/*.spec.tsx"]
}
You can see it inherits from the NX library's tsconfig.json
which inherits from the NX monorepo's tsconfig.base.json
. I'm pretty positive that most of that doesn't matter but I will paste in these rules from the base
:
"compilerOptions": {
"lib": ["DOM", "DOM.Iterable", "ES2022"],
"isolatedModules": true,
"esModuleInterop": true,
"resolveJsonModule": true,
"strict": true,
"allowJs": true,
"forceConsistentCasingInFileNames": true,
"rootDir": ".",
"sourceMap": false,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "ES2022",
"noUncheckedIndexedAccess": true,
"module": "esnext",
"skipLibCheck": true,
"skipDefaultLibCheck": true,
"baseUrl": ".",
"noEmit": true,
"jsx": "react-jsx",
"paths": {
// lots of paths to NX libraries
}
},
"exclude": ["node_modules", "tmp"]