“Matchers<HTMLElement>”类型上不存在属性“toBeInTheDocument”答案

【问题标题】：Property 'toBeInTheDocument' does not exist on type 'Matchers<HTMLElement>'“Matchers<HTMLElement>”类型上不存在属性“toBeInTheDocument”
【发布时间】：2020-06-30 09:10:29
【问题描述】：

尝试为组件库设置测试。我已经尝试了许多示例和所有类似的线程，但没有运气。

我的 setupTests.ts 文件正在正确加载（通过 console.log 证明），并且该库似乎可用，就像我添加 import { toBeInTheDocument } from '@testing-library/jest-dom/matchers' 并记录 toBeInTheDocument 它存在一样。

我也尝试了expect.extend({ toBeInTheDocument }) 选项，不幸的是仍然出现同样的错误。

以下是我的文件，我缺少什么？谢谢

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

错误：

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

  ● <Container /> › renders

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

编辑： Vlad 的评论是正确的，我的错误是愚蠢的。虽然现在测试运行没有任何错误，但 VSCode 仍然抱怨它。

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

我发现将“testing-library__jest-dom”添加到 tsconfig “types” 似乎可以抑制错误，将鼠标悬停在 any 类型的函数上，我无法跳转到函数的定义“未找到定义对于“toBeInTheDocument”。

关于为什么没有加载类型定义的任何想法？

【问题讨论】：

toBeInTheDocument 不是 toBeIntheDocument 确保您没有拼写错误
@Rostyslav 对不起？你重复了两次相同的字符串，所以我很困惑？
相同但不同但仍然相同:) The 应大写
@Rostyslav ARGH 天哪，大脑爆炸了。我完成了这一天。
这个问题是特定于 TS 的。通常，您可能希望为 prod 和测试提供单独的 TS 配置，而 prod 中没有 Jest、Node 等类型。从通用配置中扩展它们并仅在产品中使用types，如果没有明确指定types，测试配置将自动从@types 中选择所有类型。仍然不确定为什么添加“testing-library__jest-dom”不起作用。

标签： reactjs typescript jestjs react-testing-library jest-dom

【解决方案1】：

将“@types/jest”升级到最新的“26.0.3”为我解决了这个问题。我的项目是从基础项目中复制而来的，并且 @types/jest 已经包含在内。在我初始化其他包时错过了这个。

更新后的@types/jest 对 index.d.ts Matchers 界面进行了更改，这使其一切正常。

【讨论】：