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

【问题标题】：Property 'toBeInTheDocument' does not exist on type 'Matchers<void, HTMLElement>'“Matchers<void, HTMLElement>”类型上不存在属性“toBeInTheDocument”
【发布时间】：2022-06-20 14:37:47
【问题描述】：

在 Next JS 应用程序中使用 jest-dom 和 react-testing 库设置 ts-jest 时遇到问题，我似乎无法访问任何 @testing-library/jest-dom 匹配器。

有人对这种带有 typescript 和 jest-dom 的设置有任何见解吗？到目前为止，我已经尝试了一些不同的解决方案，包括遵循 testing-library/jest-dom 文档和其他各种线程，但没有成功。

下面是相关的依赖和设置文件...

// package.json

"dependencies": {
  "@types/testing-library__jest-dom": "^5.14.2",
  ..."
},
"devDependencies": {
  "@testing-library/jest-dom": "^5.16.0",
  "@testing-library/react": "^12.1.2",
  "@types/jest": "^27.0.3",
  "@types/react": "17.0.33",
  "ts-jest": "^27.0.7",
  "typescript": "^4.5.2",
   ..."
}

// jest.config.json
/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
  preset: 'ts-jest/presets/js-with-ts-esm', // or other ESM presets
  testEnvironment: 'jsdom',
  moduleDirectories: ["node_modules", "src"],
  verbose: true,
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
    globals: {
    // we must specify a custom tsconfig for tests because we need the typescript transform
    // to transform jsx into js rather than leaving it jsx such as the next build requires.  you
    // can see this setting in tsconfig.jest.json -> "jsx": "react"
    "ts-jest": {
      tsconfig: "tsconfig.jest.json"
    }
  },
  moduleNameMapper: {
    '\\.(css|scss|png|img)$': 'identity-obj-proxy',
    '\\.svg$': '<rootDir>/__mocks__/svg.js',
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': "<rootDir>/svgTransform.js"
  },
  "transform": {
    "^.+\\.tsx?$": "ts-jest",
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': "<rootDir>/svgTransform.js"
 },
 setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
};

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "DOM",
      "DOM.Iterable",
      "ES2015",
      "ES2016.Array.Include",
      "ES2017.Object",
      "ES2017.String",
      "ES2018.AsyncIterable",
      "ES2018.Promise",
      "ES2019.Array",
      "ES2019.Object",
      "ES2019.String",
      "ES2019.Symbol",
      "ES2020.Promise",
      "ES2020.String",
      "ES2020.Symbol.WellKnown",
      "ESNEXT"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": false,
    "jsx": "preserve",
    "baseUrl": ".",
    "paths": {
      "*": [
        "src/*"
      ]
    },
    "incremental": true
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "setupTests.ts",
    "src",
    "src/@deprecated/pages/Property/components/PropertyInfo/components/Invest/components/Calculator/Calculator.spec.jsx", "src/@deprecated/pages/Property/components/PropertyInfo/components/Invest/components/Calculator/Calculator.spec.jsx", "jest.config.js"  ],
  "exclude": [
    "node_modules"
  ],
  "types": ["node", "jest", "@types/testing-library__jest-dom"]
}

// setupTests.ts
import '@testing-library/jest-dom/extend-expect'

// tsconfig.jest.json
{
    "extends": "./tsconfig.json",
    "compilerOptions": {
      "jsx": "react-jsx"
    }
  }

最后是 .toBeInTheDocument() 匹配器方法无法识别的规范文件。

// Calculator.spec.tsx
import React from 'react'
import { expect, test } from '@jest/globals'
import { render, screen, cleanup } from '@testing-library/react'
import { Calculator } from './Calculator'


afterEach(cleanup);

describe('<Calculator />', () => {
    test('Slider is rendered', () => {
      render(<Calculator rentalDividends={12} returnOnInvestment={5} fundingTarget={363500} brickPrice={1000}/>)
      const slider = screen.getByTestId("slider")
      expect(slider).toBeInTheDocument()
})

【问题讨论】：

尝试将控制台输出放在您的 jest-setup 文件中，以确保它被正确调用。尝试只导入'@testing-library/jest-dom'。尝试将该导入语句放在测试文件的标题中。
您确定需要手动导入expect 和test 吗？您可能想尝试删除此行，看看它是否解决了问题
@acuinq ...是的，解决了它。谢谢美人

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

【解决方案1】：

似乎 jest 存在一些依赖性问题，因此一种解决方法是：

尝试安装jest-without-globals

npm i -D jest-without-globals

然后导入 except 并从中测试。

import { expect, test } from 'jest-without-globals'

【讨论】：