Как правильно протестировать компонент с помощью UseState

Я новичок в тестах в реакции, и я не знаю, как правильно издеваться над значением 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"));
  });
});

не рекомендуется имитировать useState. Не могли бы вы предоставить фрагменты кода

Samantha 24.11.2022 04:14

Предоставьте достаточно кода, чтобы другие могли лучше понять или воспроизвести проблему.

Priyen Mehta 24.11.2022 06:20

@Samantha только что добавила код

Lucas Fernando 24.11.2022 15:27

Не проверяйте детали реализации. Я думаю, что useState можно было бы считать деталью реализации компонента пользовательского интерфейса. Вместо этого проверьте, достигает ли ваш компонент желаемого визуального состояния посредством взаимодействия с пользователем.

ksav 24.11.2022 15:30
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
4
73
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Компонент подобен черному ящику для тестирования. Он имеет два входа: реквизит и взаимодействие с пользователем. На их основе он что-то делает. не стоит издеваться 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"
})


Другие вопросы по теме