toBeInTheDocument recognized by TypeScript but not WebStorm

131 Views Asked by At

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:

enter image description here

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"]
0

There are 0 best solutions below