[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中有三种类型的组件:路由 ...
随机推荐
- 点开瞅瞅,再来几道Python面试题吧,Python面试题No20
本面试题题库,由公号:非本科程序员 整理发布 第1题:如何理解 Django 被称为 MTV 模式? 这个题就是面向对象设计和设计模式的开始. 你可能比较熟悉的模式叫做: MVC.说是 Model V ...
- Android内存管理(7)在AS中查看内存和cpu情况
Memory and CPU monitor Android Studio provides a memory and CPU monitor view so you can more easily ...
- JdbcTemplate:Jdbc模板和数据库元数据
通过 Jdbc .C3P0 .Druid 的使用我们会发现即使我们做了工具的封装,但重复性的代码依旧很多.我们可以通过 JdbcTemplate 即 Jdbc 模板来使我们的代码更加简洁,逻辑更加清晰 ...
- javascript之console篇
javascript中的console使用得当,将会事半功倍,对bug,性能等的跟踪,优化是个不错的利器! 1.基本日志消息打印: console.debug(msg); console.info() ...
- java 操作clob
之前在学校的时候做的都是练习,小儿科,遇到的情况完全都在自己的设想范围内.最近老是遇到字段溢出的情况,但是varchar2好像最长也只有4000个字符.所以不得不另辟蹊径,就找上了clob字段. pa ...
- 【转】IDEA 中tomcat图片储存和访问虚拟路径
1.idea 修改Tomcat的虚拟路径(第一种方法)修改配置文件有很多种,但是一直不成功;后来想还是idea的配置原因,这里tomcat虚拟路径只说一种; 修改Tomcat安装路径下server.x ...
- C语言实现截屏
实现手机控制电脑执行部分功能需要获取桌面状态,在网上找的一段截屏代码 /** * GDI 截屏函数 * 参数 hwnd 要截屏的窗口句柄 * 参数 dirPath 截图存放目录 * 参数 filena ...
- MySQL之索引以及正确使用索引
一.MySQL中常见索引类型 普通索引:仅加速查询 主键索引:加速查询.列值唯一.表中只有一个(不可有null) 唯一索引:加速查询.列值唯一(可以有null) 组合索引:多列值组成一个索引,专门用于 ...
- vue项目中的常见问题(vue-cli版本3.0.0)
一.样式问题 1.vue中使用less 安装less依赖 npm install less less-loader --save-dev 在使用时 在style标签中加入 lang="les ...
- Keil-MDK编译完成后代码大小
Code 代表执行的代码,程序中所有的函数都位于此处. RO-data 代表只读数据,程序中所定义的全局常量数据和字符串都位于此处. RW-data 代表已初始化的读写数据,程序中定义并且初始化的全局 ...