DEV Community

Cover image for React Basics~unit test/describe test
Ogasawara Kakeru
Ogasawara Kakeru

Posted on

React Basics~unit test/describe test

  • When I am testing some current code, I can use the describe function to divide the codes into groups.

  • In this case, I created a counter app.

・src/Example.jsx

import Counter from "./components/Counter";

const Example = () => {
  const originCount = 0;

  return <Counter originCount={originCount}></Counter>;
};

export default Example;

Enter fullscreen mode Exit fullscreen mode

・src/components/Counter.jsx

import { useState } from "react";

const Counter = (props) => {
  const { originCount } = props;
  const [count, setCount] = useState(originCount);

  const countUp = () => {
    setCount(count + 1);
  };

  const countDown = () => {
    setCount(count - 1);
  };

  const countClear = () => {
    setCount(0);
  };

  return (
    <div>
      <h2>Counter test</h2>
      <div>
        <span>Current count:{count}</span>
      </div>
      <div>
        <button onClick={countUp}>Countup</button>
        <button onClick={countDown}>Countdown</button>
        <button onClick={countClear}>Clear</button>
      </div>
    </div>
  );
};

export default Counter;

Enter fullscreen mode Exit fullscreen mode

・src/components/Counter.test.jsx

import { fireEvent, render, screen } from "@testing-library/react";
import Counter from "./Counter";

//A group for initial test
describe("Counter", () => {
 describe("Check the initial display", () => {

  // ① A Confirming the Initial State
    test("Whether 
    test("Whether the current count is 0 or not", () => {
      render(<Counter originCount={0} />);

      const spanElBeforeUpdate = screen.getByText("Current count:0");
      expect(spanElBeforeUpdate).toBeInTheDocument();
    });
  });

  //A group for actions tests
  describe("Control buttons", () => {

    // ① count up
    test("Whether the current count changes into 1 or not, in case the 
      countup button is clicked", () => {
      render(<Counter originCount={0} />);

      const spanElBeforeUpdate = screen.getByText("Current count:0");
      expect(spanElBeforeUpdate).toBeInTheDocument();

      const btn = screen.getByRole("button", { name: "Countup" });
      fireEvent.click(btn);

      const spanEl = screen.getByText("Current count:1");
      expect(spanEl).toBeInTheDocument();
    });
  
  // ② count down 
    test("Whether the current count  changes into -1 or not, in case the 
      countdown button is clicked ", () => {
      render(<Counter originCount={0} />);

      const spanElBeforeUpdate = screen.getByText("Current count:0");
      expect(spanElBeforeUpdate).toBeInTheDocument();

      const btn = screen.getByRole("button", { name: "Countdown" });
      fireEvent.click(btn);

      const spanEl = screen.getByText("Current count:-1");
      expect(spanEl).toBeInTheDocument();
    });

  // ③ count clear 
    test("Whether the current count changes into 0 or not, in case the 
      clear button is clicked ", () => {
      render(<Counter originCount={0} />);

      const spanElBeforeUpdate = screen.getByText("Current count:0");
      expect(spanElBeforeUpdate).toBeInTheDocument();

      const btn = screen.getByRole("button", { name: "Clear" });
      fireEvent.click(btn);

      const spanEl = screen.getByText("Current count:0");
      expect(spanEl).toBeInTheDocument();
    });
  });
});

Enter fullscreen mode Exit fullscreen mode

・Count up
Image description

・Count down
Image description

・Count clear
Image description

・Success
Image description

・Failure
Image description

Billboard image

Deploy and scale your apps on AWS and GCP with a world class developer experience

Coherence makes it easy to set up and maintain cloud infrastructure. Harness the extensibility, compliance and cost efficiency of the cloud.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay