Property 'toBeInTheDocument' does not exist on type 'Matchers'

Question

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",
  "@types/jest": "24.0.15",
  "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 () => {
    expect(true).toBe(true)
    const { getByText } = render(<Container>mad</Container>)
    // NOTE: not even my TS is happy
    // Property 'toBeInTheDocument' does not exist on type 'Matchers<HTMLElement>'
    expect(getByText('mad')).toBeIntheDocument()
  })
})

Error:

 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 ?

`toBeInTheDocument` not `toBeIntheDocument` make sure you don't have a typo — Rostyslav, Jun 30 '20 at 09:13
@Rostyslav sorry? You've repeated the same string twice, so I'm confused? — xaunlopez, Jun 30 '20 at 09:15
its same but different but still the same :) `The` should be capitalized — Rostyslav, Jun 30 '20 at 09:18
The question is specific to TS then. Usually you may want to have separate TS configs for prod and tests with no Jest, Node, etc types in prod. Extend them from common config and have `types` only in prod, without explicitly specified `types` test config will pick all types from @types automatically. Still not sure why adding "testing-library__jest-dom" didn't work. — Estus Flask, Jun 30 '20 at 11:53
@EstusFlask yea, Ive removed the `types`config as you're right without them it just uses node_modules/@types. There is this thread here https://github.com/testing-library/jest-dom/issues/123 which seems to by my problem but it's apparently fixed =\ .. — xaunlopez, Jul 01 '20 at 03:33

score 1 · Answer 1 · answered Jul 01 '20 at 04:11

Upgrading "@types/jest" to latest "26.0.3" fixed this issue for me. My project was copied from a base project and @types/jest was already included. Missed this in my initialisation of the other packages.

The updated @types/jest had a change to the index.d.ts Matchers interface which made it all work.

Property 'toBeInTheDocument' does not exist on type 'Matchers'

1 Answers1