Actuellement, j'écris un test pour tester le contenu qui se trouve à l'intérieur (contenu HTML), mais il semble que je ne puisse pas le tester correctement avec la bibliothèque de test React. Il peut trouver la valeur id de cela, mais comment obtenir le contenu HTML à l'intérieur de cet élément.

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");
});

enter image description here

2
Frontend employee 2 juin 2020 à 14:38

3 réponses

Meilleure réponse

Vous utilisez "@testing-library/jest-dom/extend-expect" qui fournit un ensemble de correspondances de plaisanterie personnalisées que vous pouvez utiliser, par exemple, vous avez toHaveTextContent(text: string | RegExp, options?: {normalizeWhitespace: boolean}) que vous pouvez utiliser ici:

const checkContent = screen.getByTestId("title-content");
expect(checkContent).toHaveTextContent("Dashboard Menu");
1
Fraction 2 juin 2020 à 12:04

Vous pouvez utiliser dans pour obtenir le texte Dashboard Menu. Essaye ça:

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()
});
0
Michael 2 juin 2020 à 11:48

Utilisez getByText

test("It should check if content matches", () => {
  const { getByText } = render(<Provider store={store}><TopBar /></Provider>)
  expect(getByText(/dashboard menu/i)).toBeTruthy();
});
0
Junius L. 2 juin 2020 à 12:03