'toBeInTheDocument' 속성이 'Matchers' 유형에 없습니다.

'toBeInTheDocument' 속성이 'Matchers' 유형에 없습니다.

API 등을 이용하여 애견 쉼터용 UI를 만드는 간단한 리액트 앱에 대한 테스트를 작성하려고 합니다.아래 표시된 모듈을 Import하여 다음 명령을 실행했습니다.

npm install jest-dom react-testing-library --save-dev

하지만, 나는 미래에 대해In The Document(). 빨간색으로 밑줄이 그어진 메서드와 오류 메시지

"Property 'toBeInTheDocument' does not exist on type 'Matchers<any>'."

import "react-testing-library/cleanup-after-each";
import "jest-dom/extend-expect";

import * as React from "react";
import PetCard from "./PetCard";
import Pet from "./Pet";
import { render } from "react-testing-library";

const petMock = {
  id: "225c5957d7f450baec75a67ede427e9",
  name: "Fido",
  status: "available",
  kind: "dog",
  breed: "Labrador",
} as Pet;

describe("PetCard", () => {
  it("should render the name", () => {
    const { getByText } = render(<PetCard pet={petMock} />);
    expect(getByText("Fido")).toBeInTheDocument();
  });

});

이 문제를 어떻게 해결할 수 있을지 조언해주시면 감사하겠습니다.

대부분의 답은 주로 바벨을 다루고 있는 것 같습니다.eslint, tslint 등 다른 것들과 순수한 Typescript는 추가하기에 충분합니다.@testing-library/jest-dom타입에 따라 다릅니다.

몇 가지 간단한 단계를 살펴보겠습니다.

라이브러리가 인스톨 되어 있는 것을 확인합니다.

yarn add -D @testing-library/jest-dom

또는

npm i @testing-library/jest-dom --save-dev

다음으로 tsconfig.json에 링크합니다.

"types": ["node", "jest", "@testing-library/jest-dom"],

이제 Jest 설정에 대해 설명하겠습니다.모든 테스트 파일에 Import하는 것이 아니라 Jest 구성 파일(보통 jest.config.js라고 부릅니다)에서 Import하는 것이 좋습니다.

setupFilesAfterEnv: [
   "<rootDir>/support/setupTests.js"
],

파일 .setupTests.js:

import '@testing-library/jest-dom/extend-expect'

require()자바스크립트

대체 방법(TypeScript 또는 셋업 추가를 원하지 않는 경우)Tests.js)는 다음을 추가합니다.globals.d.ts) 위에 프로젝트 루트 디렉토리import ...를 참조해 주세요.

주의: 두 솔루션 모두 설정 없이 동작합니다.esModuleInterop.

프로젝트에 올바른 유형이 설치되어 있는지 확인하십시오.

npm i -D @testing-library/jest-dom@^4.2.4

내 경험상 버전 5.x에는 Typescript 유형이 없는 것 같습니다.

eslint 재정의는 도움이 되지 않았지만

import '@testing-library/jest-dom/extend-expect'

시험 파일 구걸로 해결했어요

이 답변은 페이스북 공식 리액트 스타터 앱의 농담 설정 파일에서도 찾을 수 있었습니다.도움이 됐으면 좋겠어요.

제 경우, 다음과 같이 충분했습니다.

• 패키지에 추가합니다.devDependencies 및 설치:

"@testing-library/jest-dom": "^5.11.9",

• .spec 파일에 추가합니다.

import '@testing-library/jest-dom';

의 @testing-library/jest-dom5.11.2와 편백나무의 종류가 이 문제는 사이프러스 타입과 상충하는 것이 원인입니다.@types/chai@testing-library:

Chai와 jQuery는 네임스페이스(글로벌)이기 때문에 호환되지 않는 버전에서는 패키지 매니저(yarn 또는 npm)가 중첩되어 여러 정의가 포함되어 경합이 발생합니다.

https://docs.cypress.io/guides/tooling/typescript-support.html#Configure-tsconfig-json

를 포함하지 않는 것으로 해결됩니다.cypress는 최상위 Configuration을 추가합니다.cypress/tsconfig.json:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "baseUrl": "../node_modules",
    "types": ["cypress"]
  },
  "include": [
    "**/*.ts"
  ]
}

'답은 보통 '선택한 답'을 입니다.babel-jest목구멍을 막으려고요

다음 오류로 인해 아직 어려움을 겪고 있는 고객:

• Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>'.
• 그 which 로 이어집니다.Cannot use import statement outside a module를 import"env 파일 after Env"

바벨로 풀리는 문제가 수 요. Cannot use import statement outside a module그 둘은 서로 다르게 작용하기 때문입니다.따라서 순수하게 다음 방법으로 문제를 해결하려면ts-jest : (으, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ, ㄴ)

transform: {
  "^.+\\.(ts|tsx)$": "ts-jest"
},

일반적인 답변에서는 아무것도 동작하지 않고, 다음의 순서에 따릅니다.

1. install 」를 인스톨 해 주세요.@testing-library/jest-dom 라이선스:

npm install --save-dev @testing-library/jest-dom

2. 유형 추가

"types": ["node", "jest", "@testing-library/jest-dom"]

로로 합니다.tsconfig.json위와 유사합니다.

3. 고객님의 고객명jest.config.js과 같이 합니다.config 다다 、 config 다 、 config config config 。

...
setupFilesAfterEnv: [
  "@testing-library/jest-dom/extend-expect"
]
...

4. 이번에는 ㅇㅇㅇ, ㅇㅇㅇㅇ를 .roots: ["./src"], 인 '''"jest.config.js.

• 을 만듭니다.globals.d.ts 해서
• ."included"할 수 있습니다.tsconfig.json
• ★★★에 globals.d.ts 음음 :

import "@testing-library/jest-dom/extend-expect"

다음 기간 동안 postEnv joke 설정에 이 행을 연결하지 마십시오.ts-jest트라스파일러

테스트를 실행하고 결과를 즐기십시오.

사이드 노트:

• 셋업에는 다음이 포함됩니다.jest 테스트의 API 테스트의 경우 API 테스트,jestsupertest, E2E와의 , E2E와의 농담react-testing-library 및 리액트testcafe로 with with with with with with withreact-testing-library이제 모든 것이 작동하므로 포기하지 마십시오.
• 꼭 기입해 주세요.jest.config.js모든 확장이 커버됩니다. moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"], 「」를 있는 .tsx
• 가 빨간색 VSCode로 되지 않을 toBeInTheDocument()에서는 아직 한 에러가 하지 않았을 이 높은 합니다.types의 선언 중 tsconfig.json ★★★★★★★★★★★★로jest설정을 실시합니다.

코멘트에 기재되어 있듯이, 변경할 필요가 있는 것은 eslint 설정입니다. 해야 요.eslintrc설정:

  ...
  overrides: [
    {
      files: [
        "**/*.test.js"
      ],
      env: {
        jest: true
      }
    }
  ]

서 ★★★★★"**/*.test.js"는 테스트 파일 형식에 일치하는 글로벌입니다.

의 변경eslintrc.eslint-env모든 테스트 파일의 맨 위에 코멘트를 붙입니다.

다음 답변을 참조해 주세요.https://stackoverflow.com/a/49211283/1769777
joke 환경의 설정도 참조해 주세요.https://eslint.org/docs/user-guide/configuring#specifying-environments

import '@testing-library/jest-dom/extend-expect';
import '@testing-library/jest-dom';

SetupTests.ts 앞에 추가되는 행으로 수정되었습니다.

추가해 :import "@testing-library/jest-dom/extend-expect" 그후:import { render } from "@testing-library/react"

import React from "react"
import { render } from "@testing-library/react"
import "@testing-library/jest-dom/extend-expect"

이 문제는 서로 다른 테스트 라이브러리(예: 사이프레스 및 제스트)를 함께 사용하는 경우에 발생할 수 있습니다. 다 있다expect서로 다른 선수들과 함께 있으면 갈등이 생깁니다.

문제를 하려면 , 의 내용을 에 해 볼 수 .tsconfig.json:

{
  ...,
  "exclude": [
    "**/*.spec.ts"
  ]
}

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★tsconfig.spec.json:

{
  "extends": "./tsconfig.json",
  "include": [
    "**/*.spec.ts"
  ],
  ...
}

유형을 가져올 때 이 문제가 발생했습니다.@jest/globals설명에 따르면요 testing-library/jest-dom5.0.1 는 별도의 패키지로 입력된 정의를 이동시켜 별도의 구성 없이 바로 사용할 수 있도록 합니다.업데이트가 필요했습니다.testing-library/jest-dom ★★★★★★★★★★★★★★★★★」jest추가 타입 라이브러리를 사용하지 않고 타입을 Import하지 않으며, 개봉 후 바로 사용할 수 있습니다.

setupTests.ts

import '@testing-library/jest-dom/extend-expect';

package.json

"@testing-library/jest-dom": "5.12.0"
"jest": "27.3.1"

나는 NextJs에 Jest와 Cypress만 사용하고 있었다.모든 것을 시도해도 이 문제는 계속 발생하였습니다.cypress.config.ts 파일을 tsconfig.json 파일의 제외 목록에 추가합니다.tsconfig 파일에서 다음을 수행했습니다.

{
    "exclude": [..., "./cypress.config.ts"],
    ...
}

상세한 것에 대하여는, 다음의 링크를 참조해 주세요.https://github.com/cypress-io/cypress/issues/22059

★★★의 pnpmnpm에서 하는 레이아웃을 에 pnpm은 소수의 만 맨 import 접근 ). 」를 참조해 주세요.

다음 문서를 참조하십시오.https://pnpm.io/blog/2020/10/17/node-modules-configuration-options-with-pnpm#the-default-setup

따라서 pnpm을 사용하는 경우 현재 필요한 빠른 수정은 다음과 같습니다.

pnpm add -D @types/testing-library__jest-dom

좀 더 견고하게 하기 위해 .npmrc를 편집하여 어떤 호이스트 설정을 사용할지 결정할 수 있습니다.

중에 이 EnzymeJest 「 」를 사용하고 것을 해 주세요.jest어설션 방식

»Enzyme 예시 " " "chai어사션이 사용됩니다.그 대신 우리는 그것을 사용해야 한다.jest★★★★★★ 。

예: 사용

expect(wrapper.find(Foo)).toHaveLength(3);

대신

expect(wrapper.find(Foo)).to.have.lengthOf(3);

몇 시간 동안 이것저것 만지작거리다가 Q&A 사이트를 다 읽었어요. 것 아무 않았다.@testing-library/react ★★★★★★★★★★★★★★★★★」@testing-library/jest-dom devDependencies및에, 에, 에.dependencies.

정확히 왜 생산에 필요한지는 모르겠지만 효과가 있어요.

누가 이걸 읽어야 할지 모르겠어.그러나 나는 농담에서 몇 가지 기능을 다시 가져오고 있었기 때문에 이 문제에 휘말렸다.이 문제를 피하기 위해 다음을 제거합니다.

- import { describe, expect, it } from '@jest/globals';

이것이 리액션 프로젝트에서 이 문제에 대한 저의 해결책입니다.

1. @types/testing-library__jest-dom.

npm i -D @types/testing-library__jest-dom

2. @syslog-dom/syslog-dom 타입 스크립트 사용법에 따르면import '@testing-library/jest-dom'jest-setup.tssetupFilesAfterEnv로로 합니다.jest.config.js

// In jest-setup.ts (or any other name)
import '@testing-library/jest-dom'

// In jest.config.js add setupFilesAfterEnv
setupFilesAfterEnv: ['<rootDir>/jest-setup.js']

3. jest-setup.tstsconfig.json

{
  "include": [
    "src/**/*",
    "./jest-setup.ts"
  ],
}

언급URL : https://stackoverflow.com/questions/57861187/property-tobeinthedocument-does-not-exist-on-type-matchersany