Testing Library - 简介

@testing-library 软件包系列以用户为中心的方式帮助您测试 UI 组件。

你的测试越接近你的软件使用方式,它们能给你提供的信心就越多。

核心库 DOM Testing Library,是一个轻量级的解决方案,用于通过查询和与DOM节点(无论是使用JSDOM/Jest模拟还是在浏览器中)进行交互来测试网页。它提供的主要实用程序涉及以类似于用户在页面上查找元素的方式查询DOM中的节点。这样,该库有助于确保您的测试使您对应用程序在实际用户使用时的表现充满信心。

核心库已经被封装,为包括 React、Angular 和 Vue 在内的几个框架提供了人性化的 API。还有一个插件可以使用 Cypress 中的 testing-library 查询进行端到端测试,以及一个 React Native 的实现。

DOM Testing Library适用于任何提供 DOM API 的环境,例如 Jest、Mocha + JSDOM 或真正的浏览器。

使用测试库应避免的事项

您可能希望避免以下实现详细信息:
1、组件的内部状态

2、组件的内部方法

3、组件的生命周期方法

4、子组件

指导原则

我们尝试只提供那些鼓励你编写与实际使用方式相似的网页测试的方法和实用工具。

本项目中公共设施的配置基于以下指导原则:

1、如果它与渲染组件相关,那么它应该处理 DOM 节点而不是组件实例,并且它不应该鼓励处理组件实例。

2、它通常对于以用户会使用的方式测试应用程序组件很有用。我们在这里做出了一些权衡,因为我们正在使用计算机和通常是一个模拟的浏览器环境,但总的来说,实用程序应该鼓励以预期的方式使用组件的测试。

3、实用工具和API应该简单且灵活。

4、说到底,我们想要的是一个轻便、简单、易于理解的库。

FAQ

1、我应该使用哪种 get 方法?

答:参照:Which Query Should I Use

2、我可以用这个库编写单元测试吗?

答:当然可以!您可以使用这个库编写单元测试、集成测试和端到端测试。

       在编写测试时,请记住:

       您的测试越接近软件的实际使用方式,它们给您的信心就越多。

3、如果我的应用已本地化,而我无权访问测试中的文本,该怎么办?

这是相当常见的。我们的第一个建议是尝试获取测试中使用的默认文本。这将使一切变得更加容易(而不仅仅是使用此实用程序)。如果这不可能,那么您可能最好坚持使用data-testids(这本身也不错)。

4、我真的不喜欢 data-testids,但其他查询都没有意义。我必须使用 data-testid 吗?

当然不是。不过,人们不喜欢 data-testid 属性的一个常见原因是,他们担心将其发送到生产环境。我建议,你可能需要一些在生产环境中偶尔运行的简单端到端测试,以确保一切正常。在这种情况下,data-testid 属性将非常有用。即使你不在生产环境中运行这些测试,你可能也想在即将发送到生产环境的相同代码上运行一些端到端测试。在这种情况下,data-testid 属性也会在那里很有价值。

话虽如此,如果你真的不想发送 data-testid 属性,那么你可以使用这个简单的 babel 插件来删除它们。

如果你根本不想使用它们,那么你可以简单地使用常规的 DOM 方法和属性来查询容器中的元素。

const firstLiInDiv = container.querySelector('div li')
const allLisInDiv = container.querySelectorAll('div li')
const rootElement = container.firstChild

5、如果我正在迭代要放置 data-testid=“item” 属性的项目列表,该怎么办?如何区分它们?

你可以在选择器中包含:nth-child来让你的选择器只选择你想要的元素。

const thirdLiInUl = container.querySelector('ul > li:nth-child(3)')

或者,你可以使用getAllByRole查询 listitem 角色,并访问有问题的索引:

const items = [/* your items */
]
const {container} = render(/* however you render this stuff */)
const thirdItem = getAllByRole(container, 'listitem')[2]

6、我无法访问组件方法或组件实例!

这是有意的。

我们希望您将注意力集中在测试用户观察到的组件的输出和功能上,并避免担心组件的实现细节。

我们相信这会导致更少的脆弱和更有意义的测试代码。

请参阅此测试库的指导原则以获取更多信息。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/731443.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【面试准备日常】从头复习mysql--20240308

1.mysql数据类型 a.数值类型 分类类型大小有符号(SIGNED)范围无符号(UNSIGNED)范围描述数值类型TINYINT1 byte(-128,127)(0,255)小整数值SMALLINT2 bytes(-32768,32767)(0,65535)大整数值MEDIUMINT3 bytes(-8388608,…

[蓝桥杯]接龙数列(C语言)

目录 题目链接 题目理解 解题思路 完整代码 重难点解答 *dp数组的具体用法 *对于dp[b]dp[a]1>dp[b]?dp[a]1:dp[b]的解释 题目链接 [蓝桥杯 2023 省 B] 接龙数列 - 洛谷 题目理解 这道题让我们求任给的一串数字,若想让其变成接龙数列最少需要删除的数字…

【程序员经常使用的算法】讲解

程序员经常使用的算法 程序员经常使用的一些算法包括: 1. 排序算法(Sorting Algorithms): 冒泡排序(Bubble Sort)选择排序(Selection Sort)插入排序(Insertion Sort)归…

uniapp列表进入动画

app列表入场动画 - DCloud 插件市场 列表入场动画https://ext.dcloud.net.cn/plugin?id16957

中医把脉笔记

目录 寸关尺对应的五脏六腑自己给自己把脉把脉五布法定寸关尺分浮中沉分快慢辨阴阳看虚实 参考文章 寸关尺对应的五脏六腑 自己给自己把脉 up主道道总是睡不着的把脉教学视频 用中指按住小骨头下面一点,这是关脉,左手的关脉对应肝脏。 把脉五布法 定…

网络基础aaa

三次握手 四次挥手 网络模型 TCP or UDP 的特点 如何理解 TCP 的5层协议 TCP的5层协议是指计算机网络体系结构中,与TCP(传输控制协议)相关的五个层次。这五个层次从高到低依次是:应用层、传输层、网络层、数据链路层和物理层。每…

java注释的详尽解析

一、什么是注解 (1).注解的作用 ①:注解一般用于对程序的说明,就像注释一样,但是区别是注释是给人看的,但是注解是给程序看的。 ②:让编译器进行编译检查的作用,比如下边这个Override注解是重写的意思&am…

前端缓存使用规范

一、Cookie使用规范 cookie的存储空间非常有限且会携带在请求头中会浪费不必要的流量,如果仅仅是为存储数据,可以采用其他替代方案,例如 webStorage,非必要不使用cookie。 1、使用方法 注意:过期时间时需转换成UTC格…

内存安全的编程语言

美国政府新颁布《回归基础构件:通往安全软件之路》 《回归基础构件:通往安全软件之路》中,白宫国家网络主任办公室(ONCD)呼吁开发者使用「内存安全的编程语言」 内存安全的编程语言 根据NSA的建议,内存…

sqlyog社区版下载,数据库客户端,mysql

Downloads webyog/sqlyog-community Wiki GitHubhttps://github.com/webyog/sqlyog-community/wiki/Downloadssqlyog社区版下载

liteIDE 解决go root报错 go: cannot find GOROOT directory: c:\go

liteIDE环境配置 我使用的liteIDE为 x36 5.9.5版本 。在查看–>选项 中可以看到 LiteEnv,双击LiteEnv ,在右侧选择对应系统的env文件,我的是win64系统,所以文件名为win64.env 再双击 win64.env ,关闭当前窗口&…

git 初始化项目并上传到github

如果还没配置过,需要配置账号信息 git config --global user.name "baymax-collab" git config --global user.email "baymax-collabtest.com"创建一个新的存储库 git clone gitgithub.com:xxxx cd test git switch --create main touch READ…

C++ Qt开发:QHostInfo主机地址查询组件

Qt 是一个跨平台C图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍如何运用QHostInfo组件实现对主机地址查询功能…

ROS——VirtualBox下载

下载&安装Virtualbox Oracle VM VirtualBox 根据电脑系统版本下载。 注意:前提是电脑cpu要开启虚拟化 根据自己的需求下载 双击开始安装 浏览可以更改下载位置,默认在C盘 然后一直点,是或下一步就好了 下载拓展包 后续需要连接使…

NASA数据集——GOES-16卫星的高级图像和地球观测数据

简介 GHRSST NOAA/STAR GOES-16 ABI L2P America Region SST v2.70 dataset in GDS2 ABI_G16-STAR-L2P-v2.70是美国国家航空航天局(NASA)的一种卫星数据处理产品。这个产品是由GOES-16(也称为GOES-East)卫星的先进基线/全球地球…

201909青少年软件编程(Scratch)等级考试试卷(三级)

青少年软件编程(Scratch)等级考试试卷(三级)2019年9月 第1题:【 单选题】 执行下面的脚本后,变量“分数”的值是多少?() A:5 B:6 C:10 D:25 【正确答案】: C 【试题…

Day3 DOM-节点操作

3.1 节点 节点:标签、文本、注释、换行等,节点类型nodeType、节点名称nodeName、节点值nodeValue 元素:标签 节点层级:父节点、子节点、兄弟节点 parentNode父节点的最大节点是document,再朝上查找就是null prentElem…

2024年华为OD机试真题-提取字符串中的最长数学表达式并计算-Java-OD统一考试(C卷)

题目描述: 提取字符串中的最长合法简单数学表达式,字符串长度最长的,并计算表达式的值。如果没有,则返回0 简单数学表达式只能包含以下内容 0-9数字,符号 +-* 说明: 1. 所有数字,计算结果都不超过long 2. 如果有多个长度一样的,请返回第一个表达式的结果 3. 数学表达式…

day18_支付宝支付项目部署(保存支付信息,支付接口,支付宝异步回调)

文章目录 1 支付1.1 需求说明1.2 支付宝支付1.2.1 产品介绍产品特色使用示例申请条件费率 1.2.2 接入准备1.2.3 手机网站支付快速接入1.2.4 官方demo研究 1.3 环境搭建(service-pay)1.4 后端接口1.4.1 保存支付信息实现流程说明查询订单接口开发openFeign接口定义代码实现添加依…

Rust:Arc::new(...) 生成的变量保存在堆上吗?

是的,当你使用 Arc::new(...) 在 Rust 中创建一个新的 Arc(Atomic Reference Counted)时,传递给 Arc::new 的数据(或其副本)会被分配到堆上。Arc 是一个引用计数智能指针,它允许数据在多个所有者…