Types definitions aren't loading when executing Jest tests

Question

I'm building an open-source library of test utilities which also includes custom tech matches. But when creating test files and running them, a lot of errors are being raised regarding type definitions.

Refer to the following errors when running yarn test

The errors are related to two different type definitions, which are:

• toBeVisible is a custom Jest matcher that should come from @testing-library/jest-dom
• toHaveQueryParam is a custom Jest matcher created internally at my package and which I declared the definitions inside @types/jest.d.ts - This type definition should be loaded with declaration merging, but I presume it's not working due to the errors.

My question is: Why the type definitions aren't loading? I presume that there should be something wrong regarding the TS compiler or Jest configs

PR with the tests code

Answer 1

Very good question, I have run into this issue so many times. I use jest-extended which says in their readme that you may need to import the type definitions in a global.d.ts file. Then add the global.d.ts file to the typeRoots in your tsconfig.json.

I also created my own jest matcher internal to my repo and add that file to my typeRoots as well.

A huge note is that all of this will still fail if these files are NOT included in your tsconfig.json. For example, you have a global.d.ts file but your rootDir is set to src (excluding the global.d.ts).

---

That said here is the repo you can reference for a working example. Here is the custom matcher type definitions, global.d.ts importing jest-extended and tsconfig.json typeRoots definition.

All in all I think you just need to add the custom types explicitly to the compilerOptions. And make sure to include your custom type files in your tsconfig.json file selection.

{
  "compilerOptions": {
    "typeRoots": ["./node_modules/@types", "./**/*.d.ts", "./scripts/custom_matchers.ts"]
  }
}