[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中有三种类型的组件:路由 ...
随机推荐
- mac 安装 swoole 可能会出现的错误
请先看完之后再操作 一.用pecl安装swoole(没有安装起来) 2018年4月,由于homebrew的变动,导致无法使用brew install的方式安装php的扩展,现在改为用pecl安装,pe ...
- HyperLedger Fabric部署与链码解读
1.Fabric简介 Fabric是超级账本中的一个项目,用以推进区块链技术.和其他区块链类似,它也有一个账本,使用智能合约,且是一个参与者可以分别管理自身交易的系统.它是一个联盟链.Fabric与其 ...
- VS插件-Resharper
最近代码因为Resharper出现了点问题,同事问我这个插件有什么用,下面就列几个最近常用的功能.其他功能后续慢慢更新 1.什么是Resharper ReSharper是一个JetBrains公司出品 ...
- [Android]异常6-TextView setText延迟显示
背景:Thread和Handler显示数据到界面 解决办法有: 解决一>界面使用了ListView.GridView等,把高度和宽度调整为固定值或者match_parent 解决二>某处U ...
- 如何在Linuxt系统下运行maven项目
如何在Linuxt系统下运行maven项目 我们知道现在利用MAVEN来管理JAVA项目是非常常见的.比如公司一般都有一个自己的MAVEN仓库,通过MAVEN仓库来解决我们的项目依赖,更加方便的构建项 ...
- Linq处理decimal字段汇总Sum()为NULL
xxxxxxxx.Sum(f => f.jifen).GetValueOrDefault(0)
- 预处理、const、static、sizeof
1.预处理和宏定义 #define xxxx #ifdef xxxx ; #elseif xxxx; #endif 2.c++求随机数 rand(),rand()会返回一随机数值, 范围在0至RAND ...
- GatewayWorker + LayIM实现即时聊天
一.程序目录结构 二.代码展示 附LayIM开发文档:https://www.layui.com/doc/modules/layim.html 1.前端代码 <!DOCTYPE html> ...
- Android获取SD卡路径/内存的几种方法
Android获取SD卡路径 本篇将会带领大家学习如何获取android路径的几种常见用法,但在我开始bb之前需要大家清楚android中内存和外存之间的区别,下面进行简短介绍:android中的内存 ...
- vue自定义轻量级form表单校验
遇到了form表单提交的需求,找了vue的组件觉得不够灵活,有时间自己写了一个. 调用方法 全局引入注册: import va from 'global/js/va' va.install(Vue); ...