Библиотека тестирования React: невозможно найти элемент по data-testid во время теста ⇐ Javascript

[Anonymous]

Я столкнулся с ошибкой при тестировании компонента React с использованием библиотеки тестирования React. Тесту не удалось найти элемент с data-testid="resCard", хотя я считаю, что он должен быть отображен.

Сведения об ошибке >

● Должен отображать компонент тела с помощью поиска.

Код: Выделить всё

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

Код: Выделить всё

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

Код: Выделить всё

  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;

Внутри RestaurantCard.js я указал data-testid = «resCard», но проблема все равно остается.
1.Как устранить эту ошибку, помогите пожалуйста.


Подробнее здесь: https://stackoverflow.com/questions/793 ... uring-test