Я новичок в тестах в реакции, и я не знаю, как правильно издеваться над значением useState, чтобы правильно покрыть строки, которые используют логическое значение в качестве параметра для возврата компонента
Код реакции
import React from "react";
import { InputGroup, Input, Button, Spinner, Center } from "@chakra-ui/react";
import movieAPI from "../../services/movieAPI";
import { useNavigate } from "react-router-dom";
import styles from "./index.module.css";
export const Search = () => {
const navigate = useNavigate();
const [movie, setMovie] = React.useState("");
const [isLoading, setLoading] = React.useState(false);
const handleClick = async () => {
setLoading(true);
const data = await movieAPI.fetchMovieByTitle(movie);
setLoading(false);
navigate(`/movie/${data.Title}`, { state: data });
};
return isLoading ? (
<Center>
<Spinner
data-testid = "spinner"
className = {styles.verticalCenter}
thickness = "6px"
speed = "1.0s"
emptyColor = "gray.200"
color = "green.500"
size = "xl"
/>
</Center>
) : (
<InputGroup m = {2} p = {2}>
<Input onChange = {(e) => setMovie(e.target.value)} placeholder = "Search" />
<Button onClick = {handleClick}>Search</Button>
</InputGroup>
);
};
Как я могу смоделировать загрузку свойства, чтобы покрыть определенную строку компонента счетчика? внизу моя попытка протестировать код Spinner
import { render, fireEvent, RenderResult } from "@testing-library/react";
import { Search } from "../../components/search/search";
import { BrowserRouter as Router, useNavigate } from "react-router-dom";
import React from "react";
describe("search.tsx", () => {
let isLoading = false;
let setLoading = jest.fn();
let container: RenderResult<
typeof import("@testing-library/dom/types/queries"),
HTMLElement,
HTMLElement
>;
jest.mock("react", () => {
return {
...jest.requireActual("react"),
useState: () => ({
isLoading: isLoading,
setLoading: setLoading,
}),
};
});
beforeEach(() => {
container = render(
<Router>
<Search />
</Router>
);
});
it("should render spinner", async () => {
setLoading.mockImplementation((data) => {
isLoading = data;
});
setLoading(true);
console.info(await container.findByTestId("spinner"));
});
});
Предоставьте достаточно кода, чтобы другие могли лучше понять или воспроизвести проблему.
@Samantha только что добавила код
Не проверяйте детали реализации. Я думаю, что useState
можно было бы считать деталью реализации компонента пользовательского интерфейса. Вместо этого проверьте, достигает ли ваш компонент желаемого визуального состояния посредством взаимодействия с пользователем.
Компонент подобен черному ящику для тестирования.
Он имеет два входа: реквизит и взаимодействие с пользователем. На их основе он что-то делает. не стоит издеваться useState
. Ваш тест будет выглядеть так:
Вы можете издеваться над другими зависимостями, такими как localStorage и/или остальные вызовы API. Но нет реализации внутреннего компонента.
Ваш тест должен выглядеть так, написанный на псевдокоде
it("Should show loader while searching for movies", () => {
// mock the API to return promise which never resolves
// render component
// input some search data
// click the search button
// expect the loader to be visible
});
it("Should reflect text base on user input,", () => {
// render component
// input some search data "Start"
// expect searchInput.text to have value = "Start"
})
не рекомендуется имитировать useState. Не могли бы вы предоставить фрагменты кода