Type definitions not properly loaded when importing from jest's setupTests

[gnapse]

• jest-dom version: 1.10.0
• node version: 8.11.3
• react-testing-library version: 4.1.4

Relevant code or config:

// package.json
  "jest": {
    "setupTestFrameworkScriptFile": "<rootDir>/src/setupTests.ts",
  },

// src/setupTests.ts
import 'jest-dom/extend-expect';

// src/components/SomeComponent/SomeComponent.test.ts
expect(element).toHaveTextContent('Hello World!');
// TypeScript error in the line above:
// Property 'toHaveTextContent' does not exist on type 'Matchers<void>'

Problem description:

When importing jest-dom/extend-expect, as instructed in the README, within jest's setupTestFrameworkScriptFile file, and using TypeScript at the same time, I get TypeScript errors in my test files saying that this library's custom matchers are not found:

Property 'toHaveTextContent' does not exist on type 'Matchers<void>'

However, when I import jest-dom/extend-expect from within the very text files that need those matchers it all works. Moreover, it even works if I import it in just one of those files, which suddenly removes the TS warning from a second test file, without having to import it again from that second test file.

Suggested solution:

This StackOverflow answer may be part of the solution, but I wanted to bring this up first to see if someone more knowledgeable with TypeScript can help. @jgoz maybe?

[jgoz]

It would be helpful to see the tsconfig.json file too, but my guess would be that setupTests.ts is not being included as a source file in the TypeScript config when compiling the tests, which means TypeScript would never see the import statement and would therefore not augment the jest namespace. It would also explain why adding the import to a single test file fixes it (since the namespace only needs to be augmented once).

I can think of a couple possible solutions:

1. Make sure setupTests.ts is in the files or include section of your tsconfig.json file

2. Add a .d.ts file to your project (like jest-dom.d.ts), making sure it's included in the files or include section, that looks like the following:

   import "jest-dom/extend-expect";

   (This is what I do in my projects.)

You can try either one of the above - no need to do both.

[gnapse]

Thanks! Your tips got me in the right direction. I did not even have to add the file to the includes, but rather remove it from the excludes. Turns out create-react-app-typescript's default configuration excludes it, as you can see here. I wonder why they do that? Should I file an issue with them?

Anyway, thanks again. I'm closing this.

[jgoz]

Great!

It looks like excluding that file was deliberate: wmonk/create-react-app-typescript@8e24948

It should probably be handled in the tsconfig.test.json file (which I assume is used for tests), but it would involve duplicating the exclude config from tsconfig.json due to the rules around extends and include, exclude:

tsconfig.test.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "commonjs"
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "webpack"
  ]
}

[gnapse]

Hmmm, but when I do that, vscode still flags me the error. And not just vscode, but CRA's npm run start as well:

Failed to compile.

/Users/ernesto/code/mck/org-admin/src/lib/api/__tests__/Query.tsx
(45,21): Property 'toHaveTextContent' does not exist on type 'Matchers<void>'.

BTW I nevertheless opened the ticket wmonk/create-react-app-typescript#371 though your response does clarify a bit about the why. I'll try your second method and see how it goes.

[jgoz]

Maybe the tsconfig.test.json file is not actually being used when executing the tests. Does this use ts-jest?

[gnapse]

Wouldn't know. I'm using create-react-app-typescript and this is my first TypeScript project ever. I'll continue digging and hopefully also someone in that ticket will respond.

[Darep]

For anyone else wondering here: We were having this problem mainly with VSCode. Project ran tests fine without warnings. Creating a src/@types/jest-dom.d.ts with:

import "jest-dom/extend-expect";

"fixed" it for us :)

[FullStackForger]

I started with what @Darep did but it looks like there is no need for creating separate @types folder.
To make it work I added below into globals.d.ts and it seems to fix the problem.

import "jest-dom/extend-expect";

@Darep What's your reasoning behind @types folder?