无法找到带有文本的元素：为了您的共同兴趣

Question

我写了下面的测试：

test("Search for particular text", async () => {
    render(<Home/>)
    expect(screen.getByText("TARGADS")).toBeInTheDocument()
    expect(screen.getByText("WE BRING YOU TO THE NEXT OF THE ADVERTISEMENT")).toBeInTheDocument()
    expect(screen.getByText("For your shared interests")).toBeInTheDocument()
    screen.debug()
})

上次测试失败，原因是：

TestingLibraryElementError: Unable to find an element with the text: For your shared interests. This could be because the text is broken up by multiple elements.

当我查看渲染时 DOM:

...
<div
    class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-sm-12"
  >
    <div
      class="MuiGrid-root makeStyles-textContainer-4 MuiGrid-item MuiGrid-grid-sm-12 MuiGrid-grid-md-6"
      style="background: rgb(255, 10, 84);"
    >
      <h4
        class="MuiTypography-root makeStyles-text-5 MuiTypography-h4"
      >
        For your shared interests, you will receive 5% of our earnings for every single interestSo do not hesitate to share. Share more earn more!!!
      </h4>
    </div>
    <div
      class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-align-items-xs-center MuiGrid-justify-xs-center MuiGrid-grid-xs-12 MuiGrid-grid-md-6"
    >
      <img
        alt="Earning money"
        class="makeStyles-mediaIcon-6"
        src="money.svg"
      />
    </div>
  </div>
</div>

文本出现。我做错了什么？

Answer 1

您得到该输出是因为屏幕找不到任何包含 innerText“为了您的共同兴趣”的 DOM 元素。

这一行：

expect(screen.getByText("For your shared interests")).toBeInTheDocument()

将尝试获取 DOM 中仅包含 'For your shared interests' 的任何内容。所以，根据你的输出 HTML 那一行应该是这样的：

expect(screen.getByText("For your shared interests, you will receive 5% of our earnings for every single interestSo do not hesitate to share. Share more earn more!!!")).toBeInTheDocument()

但这看起来真的很复杂，假设您要在那里显示一些动态数据，您可以在 getByText 函数中使用正则表达式。像这样：

expect(screen.getByText(/For your shared interests/)).toBeInTheDocument()