如何使用 React 测试库测试 HTML 内容

Question

目前我正在编写一个测试来测试里面的内容（HTML 内容），但我似乎无法使用 React 测试库正确测试它。它可以找到该元素的 id 值，但是如何获取该元素内的 HTML 内容。

import React from 'react';

export const TopBar = () => {
    return (
        <div className="dashboard-title-component">
            <div>
                <div data-testid="title-content">Dashboard Menu</div>
            </div>
        </div>
    )
}

import React from "react";
import { render } from "@testing-library/react";
import { TopBar } from "./TopBar";
import { Provider } from "react-redux";
import { store } from "../../Store";
import { screen } from "@testing-library/dom";
import "@testing-library/jest-dom/extend-expect";

test("It should check if content matches", () => {
    render(
        <Provider store={store}>
            <TopBar/>
        </Provider>
    )
    const checkContent = screen.getAllByTestId("title-content");
    expect(checkContent.text()).toBe("Dashboard Menu");
});

Answer 1

您可以使用 within 获取文本 Dashboard Menu。试试这个：

test("It should check if content matches", () => {
    const { getByTestId } = render(
        <Provider store={store}>
            <TopBar/>
        </Provider>
    )
    const { getByText } = within(getByTestId('title-content'))
    expect(getByText('Dashboard Menu')).toBeInTheDocument()
});

Answer 2

您正在使用 "@testing-library/jest-dom/extend-expect"，它提供了一组您可以使用的自定义笑话匹配器，例如您可以在此处使用 toHaveTextContent(text: string | RegExp, options?: {normalizeWhitespace: boolean})：

const checkContent = screen.getByTestId("title-content");
expect(checkContent).toHaveTextContent("Dashboard Menu");

Answer 3

使用getByText

test("It should check if content matches", () => {
  const { getByText } = render(<Provider store={store}><TopBar /></Provider>)
  expect(getByText(/dashboard menu/i)).toBeTruthy();
});

Answer 4

也可以通过这种方式测试整个 HTML 节点结构：

const checkContent = screen.getByTestId("title-content");
expect(checkContent.outerHTML)
    .toEqual("<div data-testid=\"title-content\">Dashboard Menu</div>");

这是使用标准 web API Element.outerHTML

如何使用 React 测试库测试 HTML 内容

How to test HTML content with React testing library

html

javascript

reactjs

react-testing-library