React Testing Library: Element nach Datentest-ID konnte während des Tests nicht gefunden werden ⇐ JavaScript

[Guest]

Beim Testen einer React-Komponente mithilfe der React Testing Library tritt ein Fehler auf. Der Test findet kein Element mit data-testid="resCard", obwohl ich glaube, dass es gerendert werden sollte.

Fehlerdetails

● Sollte die Körperkomponente mit der Suche rendern

Code: Select all

TestingLibraryElementError: Unable to find an element by: [data-testid="resCard"]

Ignored nodes: comments, script, style






Search



Top Rated Restuarant



class="flex flex-wrap"
/>




34 | fireEvent.click(searchBtn);
35 |
> 36 | const cardsAfterSearch = screen.getAllByTestId("resCard");
|                                 ^
37 |
38 | expect(cardsAfterSearch.length).toBe(1);
39 | });

at Object.getElementError (node_modules/@testing-library/dom/dist/config.js:37:19)
at node_modules/@testing-library/dom/dist/query-helpers.js:76:38
at node_modules/@testing-library/dom/dist/query-helpers.js:109:15
at Object.getAllByTestId (src/components/__test__/Search.test.js:36:33)

Search.test.js[/b]

Code: Select all

import Body from "../Body";
import { fireEvent, render , screen} from "@testing-library/react";
import MOCK_DATA from "../mock/bodyMock.json";
import { act } from '@testing-library/react';
import { BrowserRouter } from "react-router-dom";
import "@testing-library/jest-dom";
//Global is a global object wherever the body component is rendered, creating mock fetch function.

global.fetch = jest.fn(() =>{
return Promise.resolve({
json: () => {
return Promise.resolve(MOCK_DATA);
//Here the data that return.
}
})
});

test("Should render the body component with search", async() => {

//Act is basically a promise
await act(async () =>
render(


)
);

const searchBtn = screen.getByRole("button", { name: "Search" });

const searchInput = screen.getByTestId("searchInput");

fireEvent.change(searchInput, { target: { value: "burger" } });

fireEvent.click(searchBtn);

const cardsAfterSearch = screen.getAllByTestId("resCard");

expect(cardsAfterSearch.length).toBe(1);
});

RestaurantCard.js

Code: Select all

  import { CDN_URL } from "../utils/constants";

const styleCard = {
backgroundColor: "#f0f0f0"
};

const RestuarantCard =(props) =>{
const {resData} = props;
console.log(resData);
const {cloudinaryImageId,name,cuisines,avgRating,costForTwo} = resData?.info;

return(


{name}
[h4]{cuisines.join(",")}[/h4]
[h4] {avgRating}[/h4]
[h4]  {costForTwo}[/h4]

);
};

export const withPromotedLabel = (RestuarantCard) => {
return (props) => {
return (

Promoted


)
}
}
export default RestuarantCard;

In RestaurantCard.js habe ich data-testid = "resCard" angegeben, aber das Problem besteht weiterhin.
1.Wie kann ich diesen Fehler beheben? Bitte helfen Sie mir.