Mastering Development

Property ‘toBeInTheDocument’ does not exist on type ‘Matchers

Trying to setup testing for a components library. I’ve tried many example and all similar threads on this with no luck.

My setupTests.ts file is correctly being loaded (proven with a console.log), and the library seems to be available as if I add import { toBeInTheDocument } from '@testing-library/jest-dom/matchers' and log toBeInTheDocument it is present.

I’ve tried the expect.extend({ toBeInTheDocument }) option too, and unfortunately same error still.

Below are my files, what am I missing? Thanks

// package.json
"devDependencies": {
  "@testing-library/jest-dom": "^5.11.0",
  "@testing-library/react": "^10.4.3",
  "@types/testing-library__jest-dom": "^5.9.1",
  "@types/testing-library__react": "^10.2.0",
  "jest": "^26.1.0",
  "ts-jest": "^26.1.1",
// jest.config.js
module.exports = {
  preset: 'ts-jest',
  // The root of your source code, typically /src
  // `<rootDir>` is a token Jest substitutes
  roots: ['<rootDir>/src'],

  // Jest transformations -- this adds support for TypeScript
  // using ts-jest
  transform: {
    '^.+\\.tsx?$': 'ts-jest'
  testEnvironment: 'jsdom',
  // Runs special logic, such as cleaning up components
  // when using React Testing Library and adds special
  // extended assertions to Jest
  setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],

  // // A map from regular expressions to module names that allow to stub out resources with a single module
  moduleNameMapper: {
    '@core': '<rootDir>/src/core',
    '@hooks': '<rootDir>/src/hooks',
    '@components': '<rootDir>/src/components'

  // Test spec file resolution pattern
  // Matches parent folder `__tests__` and filename
  // should contain `test` or `spec`.
  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',

  // Module file extensions for importing
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
// tsconfig
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "lib": ["esnext", "dom", "dom.iterable"],
    "jsx": "react",
    "types": ["react", "jest"],
    "outDir": "./dist",
    "baseUrl": "src",
    "paths": {
      "@core": ["core"],
      "@core/*": ["core/*"],
      "@components": ["components"],
      "@components/*": ["components/*"],
      "@hooks": ["hooks"],
      "@hooks/*": ["hooks/*"]
    "sourceMap": true,
    "declaration": true,
    "noImplicitAny": true,
    "strict": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true
  "include": ["src", "setupTests.ts"],
  "exclude": ["dist", "node_modules"]
// myproject/setupTests.ts
import '@testing-library/jest-dom/extend-expect'
// src/components/container/__tests__/container.spec.tsx
import * as React from 'react'
import { render } from '@testing-library/react'
import { Container } from '../Container'

describe('<Container />', () => {
  test('renders', async () => {
    const { getByText } = render(<Container>mad</Container>)
    // NOTE: not even my TS is happy
    // Property 'toBeInTheDocument' does not exist on type 'Matchers<HTMLElement>'


 FAIL  src/components/Container/__tests__/container.spec.tsx
  <Container />
    ✕ renders (28 ms)

  ● <Container /> › renders

    TypeError: expect(...).toBeIntheDocument is not a function

EDIT: Vlad comment was correct, silly typo on my end. Though while the test now runs without any errors, VSCode still complains about it.

Property 'toBeInTheDocument' does not exist on type 'Matchers<HTMLElement>'

I found that adding "testing-library__jest-dom" to tsconfig "types" seems to suppress the error, hovering over the function it is of type any and I cannot jump to the definition of the function "No definition found for "toBeInTheDocument".

Any ideas on why the type definitions are not loading ?

Leave a Reply

Your email address will not be published. Required fields are marked *