React 基础知识~单元测试/用户事件

当我测试用户事件时,我使用react-testing-library的fireevent函数。

・src/example.js

import counter from "./components/counter";const example = () => {  const origincount = 0;  return ;};export default example;

登录后复制

・src/commponets/counter.jsx

import { usestate } from "react";const counter = (props) => {  const { origincount } = props;  const [count, setcount] = usestate(origincount);  const countup = () => {    setcount(count + 1);  };  return (    

a test of counter

current count:{count}
);};export default counter;

登录后复制

・src/commponets/counter.test.jsx

import { render, screen, fireEvent } from "@testing-library/react";import Counter from "./Counter";test("Whether the current count counts up or not, in case the countUp button is clicked ", () => {  const { debug } = render();//test the initial state.  const spanElBeforUpdate = screen.getByText("Current count:0");  expect(spanElBeforUpdate).toBeInTheDocument();//test the user event. In this case, a click event.  const btn = screen.getByRole("button", { name: "Countup" });  fireEvent.click(btn);//test the state which is after clicked button.  const spanEl = screen.getByText("Current count:1");  expect(spanEl).toBeInTheDocument();});

登录后复制

・成功
React 基础知识~单元测试/用户事件

・失败
React 基础知识~单元测试/用户事件

以上就是React 基础知识~单元测试/用户事件的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2663993.html

(0)
上一篇 2025年3月7日 11:33:03
下一篇 2025年3月7日 11:33:14

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • Hacktoberfest 周在线拍卖系统

    概述 在 hacktoberfest 的第三周,我决定为一个较小但有前途的项目做出贡献:在线拍卖系统。尽管该项目仍处于早期阶段,但它已经显示出增长潜力,而且我看到了帮助改进其代码库的机会。我的任务是通过减少冗余代码和改进整体结构来重构项目,…

    2025年3月7日
    000
  • 拥抱 Tailwind CSS:Web 开发人员的样式新时代

    让我们开始摆脱那个永远长的 css 文件,并开始使用 tailwind css 增强您的造型体验!它使得直接在 html 或 react 组件中设置代码样式变得容易并且易于组织。 什么是 tailwind css?tailwind css …

    2025年3月7日
    200
  • OpenID Connect:您的 Web 应用程序的简化登录解决方案

    openid connect:安全 web 应用程序登录的快捷方式(使用开源实现!) 您是否正在努力为您的网络应用程序构建安全且用户友好的登录系统? OpenID Connect 来救援!这项强大的技术通过与受信任的身份提供商(例如 Okt…

    2025年3月7日
    200
  • API 每小时数据的响应式 JavaScript 轮播

    我差点把一个不完整的解决方案误认为是一个已完成的解决方案,然后继续研究我的天气应用程序的其他部分!在制作应该显示 12 小时天气的轮播时,我想添加一项功能,该功能将有助于在当天结束时获取第二天的时间。然而,轮播并没有过渡到第二天,而是不断循…

    2025年3月7日
    200
  • 在 JavaScript 中编写简洁且可维护的代码的最佳实践

    干净且可维护的代码对于任何软件项目的长期成功和可扩展性都至关重要。它改善了团队成员之间的协作,减少了错误的可能性,并使代码更易于理解、测试和维护。在这篇博文中,我们将探索一些用 javascript 编写干净且可维护的代码的最佳实践,并提供…

    2025年3月7日
    200
  • 无聊的金融:花哨的记录保存 – 呼吁所有开源贡献者

    介绍: 嘿,金融和开源爱好者!准备好接受实际上非常令人兴奋的“无聊”剂量了吗?让我向您介绍 Boring Finance – 一个最小的模块化 Web 应用程序,它将为您的个人预算游戏增添趣味。 所以,在这个令人兴奋的介绍结束后…

    2025年3月7日
    200
  • JavaScript 中字符与字符串重叠

    编写一个函数,它接受两个字符串并显示出现在任一字符串中的字符(不带双精度)。 解决方案 function characteroverlap(array1, array2) { let occurrence = {}; let str = a…

    2025年3月7日
    200
  • React:保持组件纯净

    如果喜欢这篇文章,可以买一杯咖啡来支持buy me coffee 保持组件纯净 一些 javascript 函数应该是纯的。纯函数只执行计算,不执行其他操作。通过将组件编写为纯函数,您可以避免随着代码库的增长而出现的所有令人困惑的错误和不可…

    2025年3月7日
    200
  • 康威定律和 Web 开发中的关注点分离

    康威定律指出,软件系统往往会反映构建它们的组织的通信结构,它在现代 Web 开发的结构方式中发挥着至关重要的作用。从早期实践到当今更复杂的系统(例如微前端和基于组件的架构)的演变在很大程度上是由这一原则决定的。通过研究历史上 Web 开发中…

    2025年3月7日
    200
  • typescript配置

    要配置 TypeScript,请使用 tsconfig.json 文件:指定目标 JavaScript 版本、模块系统和输出目录。设置类型检查规则,包括严格模式、隐式 “this” 和未使用的局部变量检查。根据需要添…

    2025年3月7日
    200

发表回复

登录后才能评论