reactjs - Egenskapen 'toBeInTheDocument' finns inte på typen 'Matchers'

Försöker sätta upp testning för ett komponentbibliotek. Jag har provat många exempel och alla liknande trådar om detta utan framgång.

Min setupTests.ts-fil laddas korrekt (bevisat med en console.log), och biblioteket verkar vara tillgängligt eftersom om jag lägger till import { toBeInTheDocument } from '@testing-library/jest-dom/matchers' och loggar toBeInTheDocument så är det närvarande.

Jag har också försökt alternativet expect.extend({ toBeInTheDocument }), och tyvärr samma fel fortfarande.

Nedan är mina filer, vad saknas? Tack

// 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()
  })
})

Fel :

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

  ● <Container /> › renders

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

REDIGERA: Vlads kommentar var korrekt, ett dumt stavfel från min sida. Även om testet nu körs utan några fel, klagar VSCode fortfarande på det.

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

Jag upptäckte att genom att lägga till "testing-library__jest-dom" till tsconfig "types" verkar det undertrycka felet, när jag hovrar över funktionen är dess typ any och jag kan inte hoppa till definitionen av funktionen "Ingen definition hittades för "toBeInTheDocument".

Några idéer om varför typdefinitionerna inte laddas?

Svar #1

Uppgradering av "@types/jest" till senaste "26.0.3" löste detta problem för mig. Mitt projekt kopierades från ett basprojekt och @types/jest var redan inkluderat. Missade detta vid initialiseringen av de andra paketen.

Den uppdaterade @types/jest hade en ändring i index.d.ts Matchers-gränssnittet som fick allt att fungera.

Svar #2

I filen tsconfig.json i roten av din applikation, inkludera typen "@testing-library/jest-dom" i fältet types.

"typer": ["nod","jest", "@testing-library/jest-dom"],