[React Testing] Confidently Ship Production React Apps
We want to make sure that when we ship new code, our users can use the application. The best way we've found to do that is to write automated tests that run before we deploy a new version of the app. But if our tests aren't doing exactly what the user will do, then how do we really know that things will work when users interact with our apps?
Let's rethink what it means to ship applications with confidence and what it takes to get there. With improved tools and practices, we can be more certain that what we're shipping to our users will work the way it's intended.
Additional resources: react-testing-library, Jest, jsdom, jest-dom
The workflow to test a lgoin form:

Test with react-testing-library: It provides some utities functions, such as getByLabelText, getByText, getByTestId together with data-testid attr in the dom.
The whole idea is not testing according to the implemention detail, but accroding what user will do.

Async:


'waitForElement' function can provide a easy way to test async code to opreate the DOM element
[React Testing] Confidently Ship Production React Apps的更多相关文章
- React Testing All in One
React Testing All in One React 测试 https://reactjs.org/docs/testing.html jest 26.4 https://jestjs.io/ ...
- 如何使用TDD和React Testing Library构建健壮的React应用程序
如何使用TDD和React Testing Library构建健壮的React应用程序 当我开始学习React时,我努力的一件事就是以一种既有用又直观的方式来测试我的web应用程序. 每次我想测试它时 ...
- 使用react搭建组件库:react+typescript+storybook
前期准备 1. 初始化项目 npx create-react-app react-components --template typescript 2. 安装依赖 使用哪种打包方案:webpack/r ...
- React 也就这样 01——React 元素的创建和渲染
React 是一个用于构建用户界面的 JavaScript 库 它包括两个库:react.js 和 react-dom.js react.js:React 的核心库,提供了 React.js 的核心功 ...
- React Canvas:高性能渲染 React 组
React Canvas 提供了使用 Canvas 渲染移动 Web App 界面的能力,替代传统的 DOM 渲染,具有更接近 Native App 的使用体验.React Canvas 提供了一组标 ...
- React 深入系列1:React 中的元素、组件、实例和节点
文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加深对React的理解,以及在项目中 ...
- React 与 React Native 底层共识:React 是什么
此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React 与 React Native 结合学习的方法,此小节主要介绍 React 的底层原理与 ...
- 利用 Create React Native App 快速创建 React Native 应用
本文介绍的 Create-React-Native-App 是非常 Awesome 的工具,而其背后的 Expo 整个平台也让笔者感觉非常的不错.笔者目前公司是采用 APICloud 进行移动应用开发 ...
- React:快速上手(6)——掌握React Router
React:快速上手(6)——掌握React Router 引入Router 安装 npm install react-router-dom 基础组件 React Router中有三种类型的组件:路由 ...
随机推荐
- JavaScript--确认(confirm 消息对话框)
confirm 消息对话框通常用于允许用户做选择的动作,如:“你对吗?”等.弹出对话框(包括一个确定按钮和一个取消按钮). 语法: confirm(str); 参数说明: str:在消息对话框中要显示 ...
- ACM_题目这么难,来局愉快的昆特牌吧
题目这么难,来局愉快的昆特牌吧 Time Limit: 2000/1000ms (Java/Others) Problem Description: 小Z打比赛,然而比赛太难了,他坐在电脑面前被题淹没 ...
- Django返回json给钱前台的方法
return HttpResponse(simplejson.dumps(resource.update_status, ensure_ascii=False))
- [转]Linux rpm 命令参数使用详解
转自:http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/10/08/2203153.html RPM是RedHat Package Mana ...
- SVN异常处理(五)-状态小图标不见了
1.发现问题 装了Win10,再装了Office2016等一些最新软件后,发现SVN状态小图标竟然就不见了 2.分析问题 在Window系统中,当UAC启动时,有些应用程序的图标上会显示一个盾牌,像这 ...
- 新人浅谈__(数据库的设计__数据库模型图,数据库E-R图,三大范式)
>>>> 为什么需要规范的数据库设计 在实际的项目开发中,如果系统的数据存储量较大,设计的表比较多,表和表之间的关系比较复杂,就需要首先考虑规范的数据库设计,然后进行创建库, ...
- linux设置库文件加载包含路径
第一种方式vim /etc/ld.so.conf 将要包含的路径添加到此文件中退出重新登录使配置生效或者执行命令source /etc/ld.so.conf 另一种方式利用LIBRARY_PATH和L ...
- python框架之虚拟环境的配置
在开发过程中,往往同一台电脑要开发不同的项目,不同的项目可能需要不同版本的包,为了解决这个问题就引出了虚拟环境. 配置虚拟环境: 1.安装虚拟环境: sudo pip3 install virtual ...
- 【SQLite】select into 语句
sqlite不支持类似sqlserver中的select into 语法 在SQL Server中,我们要将一个表中的数据复制到一个新表中,可以这样写: SELECT * INTO newtable ...
- Zynq7000系列之芯片系统结构概述
相比较经典的FPGA,Zynq7000系列最大的特点是将处理系统PS和可编程资源PL分离开来,固化了PS系统的存在,实现了真正意义上的SOC(System On Chip). 1. Zynq7000 ...