nx: [jest-dom] TypeError: expect(...).toBeInTheDocument is not a function

install devDepedencies @types/testing-library__jest-dom and add configuration at jest.config.js

{
  setupFilesAfterEnv: [
    "@testing-library/jest-dom/extend-expect"
  ]
}

Install:

1. @testing-library/jest-dom
2. @types/testing-library__jest-dom

Setting up

1. Create setupTests.ts in root your project and add the following code

import '@testing-library/jest-dom'

1. Edit **/apps/your-app-here/jest.config.ts with following the code

export default {
    ....
    setupFilesAfterEnv: ['../../setupTests.ts'],
}

From here you can run the Test smoothly… BUT you still have kind issue with typescript, to fix this follow next step

1. Edit **/apps/your-app-here/tsconfig.json

{
   ...

   "include": [
      ....
       "../../setupTests.ts",
    ]

   ...
}

You should ready to Go.

FWIW, I recently experienced this error in a non-nx project and resolved it by adding @types/testing-library__jest-dom to devDependencies.

@jonybekov placing it into the jest.preset.js works oddly enough, only issue you have is the <rootDir> is going to be where the project is. so you just have to resolve it like so

const nxPreset = require('@nrwl/jest/preset').default;
const path = require('path');
module.exports = {
  ...nxPreset,
  setupFilesAfterEnv: [path.resolve(__dirname, '<path from root of your workspace to your setup script>')],
};

See this commit for all that I changed to get it working

though I’ll note I wouldn’t recommend setting this up globally as it will apply to everything in your monorepo, I’d rather suggest setting up a shared jest preset that you import and spread in your projects you wish to use it in. (that is unless your entire monorepo is going to use this library and won’t have conflicts with it)

Any new/tips/tricks how we can use @testing-library/jest-dom globally?

For me it was enough to add: import ‘@testing-library/jest-dom’ to my setupTest.ts file

@rizaldirnm thanks bro!

@rizaldirnm you should probably put this in the tsconfig.spec.json, not the tsconfig.json.

Try adding it to the global jest.preset.js. I have this working inside Jest perfectly, unfortunately TS doesn’t seem to like it, even after including the setup file as part of the include files in the TS config. I receive the following error for all custom matchers:

Property 'toBeEnabled' does not exist on type 'JestMatchers<HTMLElement>'.ts(2339)

I’ve tried that But this method requires to have jest.setup.ts file (which imports @testing-library/jest-dom) in every nx project (apps, libs and etc.) where we need jest-dom

The method I want is to setup jest-dom only once, in the root of nx workspace