0

React Testing Library を学んでいます (他の言語での TDD の長年の経験)

React Testing Library に関するこのドキュメントには、getByText失敗した場合、「ただし、テスト中の DOM の状態を出力する」と記載されています。

https://testing-library.com/docs/dom-testing-library/api-debugging/

ここに画像の説明を入力

ただし、これは現在の RTL では発生しません。

代わりに、これを取得します：

  ● loads and displays greeting

    TestingLibraryElementError: Unable to find an element with the text: the current weather is: overcast clouds. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

    Ignored nodes: comments, <script />, <style />
    <h1
      data-testid="currentWeatherOutput"
    />

      27 |   const currentWeatherOutput = screen.getByTestId('currentWeatherOutput')
      28 |
    > 29 |   getByText(currentWeatherOutput, "the current weather is: overcast clouds")

ここに画像の説明を入力

私のパッケージの依存関係は

"dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "fetch": "^1.1.0",
    "msw": "^0.38.1",
    "node-fetch": "^3.2.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.2"
  },

さらに 2 つの質問があります。

  1. テスト コード内で直接デバッガーにドロップできますか? https://testing-library.com/docs/dom-testing-library/api-debugging/は、ネイティブ JS デバッガーへのアクセスについて何も言及していません

  2. DOM のスクリーンショットを撮って (これは実際にはヘッドレスではないので、いいえと思いますか?) 見てもいいですか?

4

1 に答える 1

0

screen.debug() を使用してドキュメントまたは要素をデバッグできます https://testing-library.com/docs/queries/about/#screendebug

于 2022-02-22T14:32:41.657 に答える