[FIXED] How to test component properly using UseState

Issue

I am new to tests in react and I don't know how to properly mock the useState value to properly cover the lines that uses the boolean as a parameter to return the component

React Code

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

How can I mock the property loading in order to cover the specific line of the spinner component? down below is my attempt to test the Spinner code

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.log(await container.findByTestId("spinner"));
  });
});

Solution

A component is like a black box for testing. It has two inputs: props and user interaction. Based on those it renders something. you should not mock useState. Your test would look like this:

You can mock other dependencies like localStorage and or rest api calls. But no internal component implementation.

Your test should look like this, written in pseudo code

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

Answered By - Svetoslav Petkov
Answer Checked By - - Dawn Plyler (ReactFix Volunteer)