React 基础知识~单元测试/描述测试-js教程-PHP中文网

React 基础知识~单元测试/描述测试

聖光之護

发布： 2024-10-25 19:42:34

转载

849人浏览过

react 基础知识~单元测试/描述测试

当我测试一些当前代码时，我可以使用describe函数将代码分组。
在本例中，我创建了一个计数器应用程序。

・src/example.jsx

import counter from "./components/counter";

const example = () => {
  const origincount = 0;

  return <counter origincount={origincount}></counter>;
};

export default example;

登录后复制

・src/components/counter.jsx

PHP高级教程

前言　　第一部分基础知识篇　　第1章 PHP概述　　1.1 PHP入门　　1.1.1 PHP介绍　　1.1.2 PHP的工作原理　　1.1.3 如何学好PHP编程　　1.2 PHP环境搭建　　1.2.1 PHP相关软件下载　　1.2.2 AppServ安装与测试(Windows) 　　1.2.3 XAMPP安装与测试(Windows) 　　1.2.4 II

508

查看详情

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;

登录后复制

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

登录后复制

・计数

・倒计时
・倒计时
・成功
・失败

以上就是React 基础知识~单元测试/描述测试的详细内容，更多请关注php中文网其它相关文章！