web-dev-qa-db-ja.com

react-testing-library toBeInTheDocument（）が関数ではない理由

誰かが私を助けてくれますか？私は本当にこれで立ち往生しています。以下は、cssプロパティの表示を切り替えるツールチップのコードです。MouseOverとMouse Outの表示をブロックします。なし

 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は関数ではありません。

なぜこれが起こっているのか誰かが何か考えを持っていますか？コンポーネントをレンダリングおよびスナップショットするための他のテストはすべて期待どおりに機能します。 queryByTextおよびqueryByTestIdと同様に。

ありがとう

reactjsreact-testing-library
10
dorriz

toBeInTheDocumentはRTLの一部ではありません。有効にするには jest-dom をインストールする必要があります。

17
Giorgio Polvara - Gpx

Giorgioが述べたように、jest-domをインストールする必要があります。これが私のために働いたものです：

（TypeScriptを使用していた）

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

次に、setupTests.tsにインポートを追加します

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

次に、jest.config.jsで次のようにロードします。

"setupFilesAfterEnv": [
    "<rootDir>/src/setuptests.ts"
  ]
3
Jafin