0

我正在学习 React 测试库(其他语言的多年 TDD 经验)

React 测试库上的这个文档说,当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"
  },

我还有两个问题:

  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 回答