如何使用 React 测试库通过包含 html 标签的文本字符串进行查询？

Question

当前工作解决方案

使用这个 html：

<p data-testid="foo">Name: <strong>Bob</strong> <em>(special guest)</em></p>

我可以使用React 测试库 getByTestId方法来查找textContent：

expect(getByTestId('foo').textContent).toEqual('Name: Bob (special guest)')

有没有更好的办法？

我想简单地使用这个 html：

expect(getByTestId('foo').textContent).toEqual('Name: Bob (special guest)')

并像这样使用React Testing Library的getByText方法：

expect(getByText('Name: Bob (special guest)')).toBeTruthy()

但这不起作用。

所以，这个问题……

有没有一种更简单的方法来使用 React 测试库来查找带标签的文本内容字符串？

Answer 1

对于子字符串匹配，您可以传递{ exact: false }：

https://testing-library.com/docs/dom-testing-library/api-queries#textmatch

const el = getByText('Name:', { exact: false })
expect(el.textContent).toEqual('Name: Bob (special guest)');

Answer 2

更新 2

使用了很多次后，我创建了一个助手。以下是使用此帮助程序的示例测试。

测试助手：

// withMarkup.ts
import { MatcherFunction } from '@testing-library/react'

type Query = (f: MatcherFunction) => HTMLElement

const withMarkup = (query: Query) => (text: string): HTMLElement =>
  query((content: string, node: HTMLElement) => {
    const hasText = (node: HTMLElement) => node.textContent === text
    const childrenDontHaveText = Array.from(node.children).every(
      child => !hasText(child as HTMLElement)
    )
    return hasText(node) && childrenDontHaveText
  })

export default withMarkup

测试：

// app.test.tsx
import { render } from '@testing-library/react'
import App from './App'
import withMarkup from '../test/helpers/withMarkup'

it('tests foo and bar', () => {
  const { getByText } = render(<App />)
  const getByTextWithMarkup = withMarkup(getByText)
  getByTextWithMarkup('Name: Bob (special guest)')
})

更新 1

这是一个getByTextWithMarkup创建新匹配器的示例。请注意，此函数getByText在测试中扩展，因此必须在那里定义。（当然可以更新该函数以接受getByText作为参数。）

import { render } from "@testing-library/react";
import "jest-dom/extend-expect";

test("pass functions to matchers", () => {
  const Hello = () => (
    <div>
      Hello <span>world</span>
    </div>
  );
  const { getByText } = render(<Hello />);

  const getByTextWithMarkup = (text: string) => {
    getByText((content, node) => {
      const hasText = (node: HTMLElement) => node.textContent === text
      const childrenDontHaveText = Array.from(node.children).every(
        child => !hasText(child as HTMLElement)
      )
      return hasText(node) && childrenDontHaveText
    })
  }

  getByTextWithMarkup('Hello world')

以下是来自Giorgio Polvara 博客的关于测试库的五件事中的第四件事的可靠答案：

查询也接受函数

您可能已经看到过这样的错误：

无法找到带有文本的元素：Hello world。这可能是因为文本被多个元素分解了。在这种情况下，您可以为您的文本匹配器提供一个功能，使您的匹配器更加灵活。

通常，发生这种情况是因为您的 HTML 如下所示：

// withMarkup.ts
import { MatcherFunction } from '@testing-library/react'

type Query = (f: MatcherFunction) => HTMLElement

const withMarkup = (query: Query) => (text: string): HTMLElement =>
  query((content: string, node: HTMLElement) => {
    const hasText = (node: HTMLElement) => node.textContent === text
    const childrenDontHaveText = Array.from(node.children).every(
      child => !hasText(child as HTMLElement)
    )
    return hasText(node) && childrenDontHaveText
  })

export default withMarkup

解决方案包含在错误消息中：“[...] 您可以为您的文本匹配器提供一个函数 [...]”。

那是怎么回事？结果证明匹配器接受字符串、正则表达式或函数。

为您渲染的每个节点调用该函数。它接收两个参数：节点的内容和节点本身。您所要做的就是根据节点是否是您想要的节点返回 true 或 false。

一个例子将阐明它：

import { render } from "@testing-library/react";
import "jest-dom/extend-expect";

test("pass functions to matchers", () => {
  const Hello = () => (
    <div>
      Hello <span>world</span>
    </div>
  );
  const { getByText } = render(<Hello />);

  // These won't match
  // getByText("Hello world");
  // getByText(/Hello world/);

  getByText((content, node) => {
    const hasText = node => node.textContent === "Hello world";
    const nodeHasText = hasText(node);
    const childrenDontHaveText = Array.from(node.children).every(
      child => !hasText(child)
    );

    return nodeHasText && childrenDontHaveText;
  });
});

我们忽略了这个content参数，因为在这种情况下，它要么是“Hello”、“world”，要么是一个空字符串。

我们正在检查的是当前节点是否具有正确的textContent。hasText是一个小辅助函数来做到这一点。我宣布它是为了保持清洁。

但这还不是全部。我们div并不是唯一一个包含我们正在寻找的文本的节点。例如，body在这种情况下具有相同的文本。为了避免返回比需要更多的节点，我们确保没有任何子节点与其父节点具有相同的文本。通过这种方式，我们确保我们返回的节点是最小的——换句话说，靠近 DOM 树底部的节点。

阅读关于测试库你（可能）不知道的其余五件事

Answer 3

现有的答案已经过时。新的*ByRole查询支持：

getByRole('button', {name: 'Bob (special guest)'})

Answer 4

如果你testing-library/jest-dom在你的项目中使用。您也可以使用toHaveTextContent.

expect(getByTestId('foo')).toHaveTextContent('Name: Bob (special guest)')

如果您需要部分匹配，您还可以使用正则表达式搜索模式

expect(getByTestId('foo')).toHaveTextContent(/Name: Bob/)

这是包的链接

Answer 5

更新

下面的解决方案有效，但在某些情况下，它可能会返回多个结果。这是正确的实现：

getByText((_, node) => {
  const hasText = node => node.textContent === "Name: Bob (special guest)";
  const nodeHasText = hasText(node);
  const childrenDontHaveText = Array.from(node.children).every(
    child => !hasText(child)
  );

  return nodeHasText && childrenDontHaveText;
});

您可以将方法传递给getbyText：

getByText((_, node) => {
  const hasText = node => node.textContent === "Name: Bob (special guest)";
  const nodeHasText = hasText(node);
  const childrenDontHaveText = Array.from(node.children).every(
    child => !hasText(child)
  );

  return nodeHasText && childrenDontHaveText;
});

您可以将代码放入辅助函数中，这样您就不必一直输入它：

getByText((_, node) => node.textContent === 'Name: Bob (special guest)')