react-testing-library는 왜 ToBeInThe Document()

react-testing-library는 왜 ToBeInThe Document()

CSS 속성을 전환하는 툴팁의 코드를 다음에 나타냅니다.display: block마우스 오버 및 마우스 아웃 시display: none.

 it('should show and hide the message using onMouseOver and onMouseOut events respectively', () => {
    const { queryByTestId, queryByText } = render(
      <Tooltip id="test" message="test" />,
    )
    fireEvent.mouseOver(queryByTestId('tooltip'))
    expect(queryByText('test')).toBeInTheDocument()
    fireEvent.mouseOut(queryByTestId('tooltip'))
    expect(queryByText('test')).not.toBeInTheDocument()
    cleanup()
  })

TypeError: expect(...)라는 오류가 계속 나타납니다.toBeInTheDocument는 함수가 아닙니다.

왜 이런 일이 일어나는지 아는 사람 있나요?컴포넌트를 렌더링 및 스냅숏하기 위한 다른 테스트는 모두 예상대로 동작합니다.queryBy도 마찬가지입니다.텍스트 및 쿼리 기준테스트 ID

toBeInTheDocument는 RTL의 일부가 아닙니다.활성화하려면 jest-dom을 설치해야 합니다.

그런 다음 다음을 수행하여 테스트 파일로 가져옵니다.

import '@testing-library/jest-dom'

Giorgio가 언급한 바와 같이, 당신은 jest-dom을 설치해야 합니다.다음과 같은 이점이 있습니다.

(타자기본을 사용하고 있었습니다)

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

그런 다음 설정에 가져오기를 추가합니다.Tests.ts

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

그런 다음 jeast.config.js에서 다음 방법으로 로드할 수 있습니다.

"setupFilesAfterEnv": [
    "<rootDir>/src/setupTests.ts"
  ]

할 때npm i @testing-library/react설정이 되어 있는지 확인하다Tests.js 파일에 다음 문장이 포함되어 있습니다.

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

이 투고에 기재되어 있는 모든 조언을 시도해 보았지만, 아직 효과가 없기 때문에, 대체 솔루션을 제안하고 싶습니다.

jest-dom 설치:

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

그 후,setupTests.jssrc 디렉토리에 있는 파일(이 비트는 중요합니다!루트 디르에 넣어 두었지만, 이 방법은 작동하지 않았습니다...)여기에 다음을 입력합니다.

import '@testing-library/jest-dom'

(또는require(...)원하는 경우)를 클릭합니다.

이것은 나에게 효과가 있었다:)

내가 타이핑하는 바보 같은 실수를 했기 때문에 나는 어떤 대답도 듣지 못했다.toBeInDocument()대신toBeInTheDocument()다른 사람도 같은 실수를 했을지도 모릅니다:)

받아들여진 답변 중 일부는 기본적으로 맞지만 일부는 약간 구식일 수 있습니다.현재 유효한 참고 자료:

• https://github.com/testing-library/jest-dom
• https://jestjs.io/docs/configuration

필요한 모든 것은 다음과 같습니다.

1. 프로젝트 기간 중에<rootDir>(일명 여기서)package.json그리고.jest.config.jsare)라는 이름의 파일이 있는지 확인합니다.jest.config.js그러면 Jest가 자동으로 설정을 위해 선택할 수 있습니다.파일은 JS에 있지만 package.json과 유사한 구조로 되어 있습니다.
2. 다음 항목을 입력해야 합니다.

  module.exports = {
    testPathIgnorePatterns: ['<rootDir>/node_modules', '<rootDir>/dist'], // might want?
    moduleNameMapper: {
      '@components(.*)': '<rootDir>/src/components$1' // might want?
    },
    moduleDirectories: ['<rootDir>/node_modules', '<rootDir>/src'],
    setupFilesAfterEnv: ['<rootDir>/src/jest-setup.ts'] // this is the KEY
    // note it should be in the top level of the exported object.
  };

3. 또, 타이프 스크립트를 사용하고 있는 경우는, 다음의 조작을 실시할 필요가 있습니다.jest-setup.ts파일이 컴파일 됩니다(따라서 추가).src또는 컴파일할 항목 목록으로 이동합니다.tsconfig.json.

4. 의 맨 위에jest-setup.ts/js(또는 이 엔트리 포인트에 이름을 붙이는 것) 파일: 추가import '@testing-library/jest-dom';.

5. 또, 실제로 동작하고 있는 것을 확인할 수도 있습니다.console.log('hello, world!');또, 다음과 같이, 농담으로 사용할 수 있는 글로벌 기능을 추가할 수도 있습니다.global.fetch = jest.fn()를 참조해 주세요.

6. 설치하셔야 .@testing-library/jest-domnpm i -D @testing-library/jest-dom콘솔로 이동합니다.

이 스텝으로 jajest-dom을 사용할 준비가 되어 있어야 합니다.

TS를 사용하지 않는 경우: 다음 사항이 필요합니다.

1. npm i -D @testing-library/jest-dom
2. 의 작성jest.config.js.module.exports = { setupFilesAfterEnv: ['<rootDir>/[path-to-file]/jest-setup.js'] }.
3. 의 작성[path-to-file]/jest-setup.js ★★★★★★★★★★★★★★★」import '@testing-library/jest-dom';.

한 joest-setup을 하는 등의 합니다.renderWithProvider(기능을 수행하거나 전역 창 기능을 설정합니다.

이 문제를 해결하는 데 어려움을 겪었기 때문에 프로젝트에 CREATE RECT APP을 사용하는 경우 다음 사항에 유의해야 한다고 생각합니다.

1. 는 않아요.jest.config.js이 문제를 해결하려면 파일을 삭제하십시오.
2. 에서는 아무것도 변경할 필요가 없습니다.package.json.
3. 파일의 이름을 해야 합니다.setupTests.js그리고 그것을 아래쪽에 두고src폴더입니다.셋업 파일이 호출되면 동작하지 않습니다.jest.setup.js ★★★★★★★★★★★★★★★★★」jest-setup.js.

1. 필수 패키지 설치

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

2. jest-setup.js해 주세요.

   import '@testing-library/jest-dom'
   

3. jest.config.js

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

4. TypeScript.tsconfig.json파일. 또한 .js 확장자를 .ts로 변경합니다.

   "include": ["./jest-setup.ts"]
   

toBeInTheDocument()이 많이 않습니다.React-testing-library 해야 합니다 추가 패키지를 설치해야 합니다.

Typescript를 합니다.@testing-library/jest-dom에 이어 : : 의 유형 해야 할 수 .jest-dom(여기서):

npm i @types/testing-library__jest-dom

또는

yarn add @types/testing-library__jest-dom

은 실제 해야 하며, 그렇지 안 됩니다.devDependency.

@testing-library/jasmine-dom@testing-library/jest-dom.

재스민에서는 셋업 프로세스가 아주 조금 다릅니다.합니다.before매처 추가 기능을 수행합니다.농담은 네가 처음 시작할 때 더 나아가서 입문자를 추가해 줄 것이다.import하지만 재스민은 그렇지 않다.

import { render, screen } from '@testing-library/react';
import MyComponent from './myComponent';
import JasmineDOM from '@testing-library/jasmine-dom';

describe("My Suite", function () {

  beforeAll(() => {
    jasmine.getEnv().addMatchers(JasmineDOM);
  })


  it('render my stuff', () => {
    const { getByText } = render(<MyComponent />);
    const ele = screen.getByText(/something/i);
    expect(ele).toBeInTheDocument();
  });
});

TS, Test.d.ts, Test.d.ts, Test.dts, Test.ts, Test.ts, Test.ts, Test.D.ts, Test.ts, Test.D.ts, Test.D.ts, Test.T.D.D.S, Test.D.T.S, Test, Test, Test.S, Test.S, Test.S, Test.S, Test.///<reference types='@testing-library/jest-dom'>

react-script 를 사용하고 있는 경우는, 다음의 순서에 따릅니다.

1. @testing-library/jest-dom(아직 )npm i @testing-library/jest-dom.
2. 놓다를 import "@testing-library/jest-dom/extend-expect"jssetUpTest.js로 합니다.

joke를 사용하는 경우 라이브러리를 Import합니다.jest.setup.jsfilename을 클릭합니다.

대신 다음 작업을 수행하는 대신:

    expect(queryByText('test')).toBeInTheDocument()

를 사용하여 한 줄만 사용하여 문서에 있는지 확인하고 테스트할 수 있습니다.

    let element = getByText('test');

getBy 호출에서 요소를 찾을 수 없으면 테스트가 실패합니다.

언급URL : https://stackoverflow.com/questions/56547215/react-testing-library-why-is-tobeinthedocument-not-a-function