react-testing-library
简介
react-testing-library
是一个用于测试 React 组件的库,其方式类似于最终用户使用组件的方式。它非常适合 React 组件和应用程序的单元测试、集成和 e2e 测试。它更直接地与 DOM 节点一起使用,因此建议与 jest-dom 一起使用,这样可以方便的做断言。
react-testing-library
可以取代enzyme库与jest结合来对react组件进行测试。
本文参考地址:
官网地址:
- 如何使用React测试库教程
- react-testing-library
- API
- 内置断言库
配置
安装:
npm install --save @testing-library/react @testing-library/jest-dom
或
yarn add @testing-library/react
yarn add @testing-library/jest-dom
全局配置(结合jest.config.js使用)
在 tests/setupTests.js
中引入的全局的配置:
// react-testing-library 将您的组件显示为document.body,
// 这将为 jest-dom 添加一个自定义断言
import '@testing-library/jest-dom';
基础
渲染组件
render:render(<App />)
函数渲染组件。您应该可以在测试中访问React组件。同时使用screen.debug();
在运行测试文件时,命令行中会输出已经渲染的组件html结构。
选择元素
搜索类型
screen.getByText
screen.getByText('Search:');
通过文本来选择元素。
getByText
如果找不到元素,默认情况下会方便地引发错误。因此无需写显示断言。
该getByText
函数接受一个字符串作为输入,也接受一个正则表达式。字符串参数用于完全匹配,而正则表达式可用于部分匹配。
screen.getByRole
getByRole
函数通常用于通过aria-label属性检索元素,通过它们在React Testing Library中的可访问性角色来选择元素。
通常不必为HTML元素显式分配aria角色,因为DOM已经具有附加到HTML元素的隐式角色,例如input元素。它是getByText
的有力竞争者。
语法:getByRole(‘type’,{name:‘name’});
type: 元素类型
name:[aria-label属性名]
扩展
其他的对于特定元素的搜索类型:
- screen.getByLabelText 与给定匹配的标签,然后找到与该标签关联的元素。
- screen.getByPlaceholderText
- screen.getByAltText
- screen.getByDisplayValue
LabelText: getByLabelText:<label for="search" />
PlaceholderText: getByPlaceholderText:<input placeholder="Search" />
AltText: getByAltText:<img alt="profile" />
DisplayValue: getByDisplayValue:<input value="JavaScript" />
- screen.getByTestId :
getByTestId
需要HTML中分配属性data-testid
搜索变体
思考:
何时使用getBy vs queryBy?
当我们断言不存在的元素时使用queryBy
何时使用findBy?
findBy搜索变量用于异步元素,这些元素最终会出现。
如何选择多个元素?
所有的搜索变体都可以用All扩展,例 getAllBy\queryAllBy\findAllBy ,它们都返回一个元素数组,并且可以再次与搜索类型相关联。
getBy*
默认的搜索变体,例screen.getByText
和screen.getByRole
。这也是测试React组件时默认使用的搜索变体。它返回一个元素或者错误。
queryBy*
screen.queryByText(/Searches for JavaScript/)
跟getBy访问的相同搜索类型进行扩展,如下:
- queryByText
- queryByRole
- queryByLabelText
- queryByPlaceholderText
- queryByAltText
- queryByDisplayValue
findBy*
example:expect(await screen.findByText(/Signed in as/)).toBeInTheDocument();
与getBy访问的相同搜索类型进行扩展,如下
- findByText
- findByRole
- findByLabelText
- findByPlaceholderText
- findByAltText
- findByDisplayValue
选择多个元素
screen.getAllBy*、screen.queryAllBy* 、screen.findAllBy*
返回结果一览表
输出选择元素
screen.debug(screen.getAllBy*/getBy*)
screen.debug(screen.queryAllBy*/queryBy*)
screen.debug(screen.findAllBy*/findBy*)
断言
React测试库扩展了jest的api,定义了自己的断言函数,所有的断言函数包含在@testing-library/jest-dom
包中。详情:内置断言库
- toBeDisabled
- toBeEnabled
- toBeEmpty
- toBeEmptyDOMElement
- toBeInTheDocument
- toBeInvalid
- toBeRequired 表单字段必须
- toBeValid
- toBeVisible
- toContainElement
- toContainHTML
- toHaveAttribute
- toHaveClass 有某一个类名
- toHaveFocus
- toHaveFormValues
- toHaveStyle
- toHaveTextContent
- toHaveValue
- toHaveDisplayValue
- toBeChecked
- toBePartiallyChecked
- toHaveDescription
事件
fireEvent
例:
fireEvent.change(screen.getByRole('textbox'), {target: { value: 'JavaScript' },});
fireEvent函数接受一个元素(这里是textbox角色的输入字段)和一个事件(这里是一个值为“JavaScript”的事件,此处只触发change事件,并不触发keyDown,keyUp,keyPress事件)。
用户事件
userEvent
例如:
import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';import App from './App';describe('App', () => {test('renders App component', async () => {render(<App />);// wait for the user to resolveawait screen.findByText(/Signed in as/);expect(screen.queryByText(/Searches for JavaScript/)).toBeNull();await userEvent.type(screen.getByRole('textbox'), 'JavaScript');expect(screen.getByText(/Searches for JavaScript/)).toBeInTheDocument();});
});
Whenever possible, use userEvent over fireEvent when using React Testing Library
回调处理程序
使用jest模拟函数模拟回调处理程序,与具体查看jest文档
异步
使用jest模拟请求函数,具体查看jest文档
findBy搜索变量用于异步元素,这些元素最终会出现。可以用它等得某元素的出现,可以使用更为明确的等待promise:await act(() => promise);,
react-testing-library相关推荐
- Jest + React Testing Library 单测总结
大家好,我是若川.持续组织了6个月源码共读活动,感兴趣的可以点此加我微信 ruochuan02 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列& ...
- 使用 Jest + Testing Library 完成 React 的单元测试
说明 不同于普通JS测试,组件的测试会更关注 DOM 渲染,以及组件功能正确性,而不是组件内部某些方法调用等的测试 Testing Library 包含 DOM 及 UI 组件测试的一系列工具, 支持 ...
- react测试组件_测试驱动的开发,功能和React组件
react测试组件 This article is part of my studies on how to build sustainable and consistent software. In ...
- todoist 无法登陆_通过构建Todoist克隆将您的React技能提升到一个新的水平
todoist 无法登陆 In this intermediate React course from Karl Hadwen, you will learn how to create the po ...
- React Native小白入门学习路径——五
React Native小白入门学习路径--五 序 "哦天呐!" 这句话成了我在实验室的口头禅, 老师可能觉得我们都是大神吧,都还在看着基础就给布置了那么多任务:写一个RN的TDD ...
- 60+ 实用 React 工具库,助力你高效开发!
大家好,我是若川.持续组织了5个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列& ...
- React 18 Beta 来了
大家好,我是若川.最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12 参与,目前近3000人参与. 经过「React18工作组」几个月工作,11月16日v18终于从Alpha版本更新到 ...
- 如何使用React,TypeScript和React测试库创建出色的用户体验
I'm always willing to learn, no matter how much I know. As a software engineer, my thirst for knowle ...
- react jest测试_如何使用React测试库和Jest开始测试React应用
react jest测试 Testing is often seen as a tedious process. It's extra code you have to write, and in s ...
- react hook 造轮子
GitHub地址:https://github.com/rayhomie/rayhomieUI 一.sass的使用 1.@import方式引入scss文件,后面必须带后缀名scss @import & ...
最新文章
- 智能&大数据时代,架构师思维的十个学习步骤(优化版)
- python语言remove_慎用python的pop和remove方法
- iOS开发隐藏键盘方法总结
- JdbcTemplate(操作数据库-添加功能)
- Spring、SpringMVC和SpringBoot之间的关系
- 图表如何又酷又实用?这个功能,能让大屏做出专家级效果
- 一步一步教您用websocket+nodeJS搭建简易聊天室(4)
- SpringCloud之高可用的分布式配置中心(Spring Cloud Config)(七)
- linux 软件查询,linux安装常用软件和查询基本信息
- OD教程(多态和变形)
- 搜索引擎SEO 入门学习摘要笔记
- Apollo选型及优势介绍
- Windows安装ElasticSearch 7.3.0
- enable 华为交换机ntdp_华为交换机常用命令
- 【Android】时钟动态图标的定制化
- 前端工资涨不上去?可能是你没掌握构建工具:关于 Webpack、Babel、esbuild、Vite、Rollup、Parcel、SWC......的那些事
- 魔众EDM邮件营销系统 v1.0.0 专业的EDM邮件营销系统
- 计算机服务用什么打开,bonjour是什么软件_在win7电脑中打开itunes程序却提示bonjour服务已被禁用怎么办?...
- 云计算上演《西游记》?Gartner报告也有“真假美猴王”
- 实验研究脂质体表面修饰多肽、氨基酸和蛋白
热门文章
- 高效获得准确的中国地图数据并进行可视化
- nero刻录软件linux,下载:Linux平台刻录工具NeroLINUX 3.5.2.0版
- [笔记] 《Windows网络编程(第2版)》
- python图片分类毕业设计成果报告书_毕业设计成果报告书.pdf
- mysql 并行操作_将MySQL去重操作优化到极致之三弹连发(二):多线程并行执行...
- 第七次全国人口普查,数据来了!
- python语言常用语法汇总
- JEP 290 初识
- C#写的制程能力CPK分析程序
- 修改Docker镜像源地址为网易镜像源地址