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-libraryJestjsdomjest-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的更多相关文章

  1. React Testing All in One

    React Testing All in One React 测试 https://reactjs.org/docs/testing.html jest 26.4 https://jestjs.io/ ...

  2. 如何使用TDD和React Testing Library构建健壮的React应用程序

    如何使用TDD和React Testing Library构建健壮的React应用程序 当我开始学习React时,我努力的一件事就是以一种既有用又直观的方式来测试我的web应用程序. 每次我想测试它时 ...

  3. 使用react搭建组件库:react+typescript+storybook

    前期准备 1. 初始化项目 npx create-react-app react-components --template typescript 2. 安装依赖 使用哪种打包方案:webpack/r ...

  4. React 也就这样 01——React 元素的创建和渲染

    React 是一个用于构建用户界面的 JavaScript 库 它包括两个库:react.js 和 react-dom.js react.js:React 的核心库,提供了 React.js 的核心功 ...

  5. React Canvas:高性能渲染 React 组

    React Canvas 提供了使用 Canvas 渲染移动 Web App 界面的能力,替代传统的 DOM 渲染,具有更接近 Native App 的使用体验.React Canvas 提供了一组标 ...

  6. React 深入系列1:React 中的元素、组件、实例和节点

    文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加深对React的理解,以及在项目中 ...

  7. React 与 React Native 底层共识:React 是什么

    此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React 与 React Native 结合学习的方法,此小节主要介绍 React 的底层原理与 ...

  8. 利用 Create React Native App 快速创建 React Native 应用

    本文介绍的 Create-React-Native-App 是非常 Awesome 的工具,而其背后的 Expo 整个平台也让笔者感觉非常的不错.笔者目前公司是采用 APICloud 进行移动应用开发 ...

  9. React:快速上手(6)——掌握React Router

    React:快速上手(6)——掌握React Router 引入Router 安装 npm install react-router-dom 基础组件 React Router中有三种类型的组件:路由 ...

随机推荐

  1. wxwidgets安装环境配置

    一:安装VS2012 wxWidgets-2.9.5( 2.95版本为最稳定版本) 二:打开wxWidgets-2.9.5的安装目录,找到build-msw-wx_vc10.sln打开(等待) 三:打 ...

  2. 【洛谷4219】[BJOI2014]大融合(线段树分治)

    题目: 洛谷4219 分析: 很明显,查询的是删掉某条边后两端点所在连通块大小的乘积. 有加边和删边,想到LCT.但是我不会用LCT查连通块大小啊.果断弃了 有加边和删边,还跟连通性有关,于是开始yy ...

  3. Android fragment-findFragmentByTag 始终返回 null

    我曾四处看看,在我的案子中找到几个与类似的主题,但没有帮助的问题.我想访问现有活动片段使用getSupportFragmentManager().findFragmentByTag(TAG),但它始终 ...

  4. CNN结构:色彩特征提取-从RGB空间到HSV空间(色彩冷暖判断)

      转自知乎和百度百科:从零开始学后期             文章: 冷暖色区分?冷暖肤色适用于那些色系的彩妆?    文章:干货 |如何判断人体色冷暖?如何判断色彩冷暖?(值得收藏研读!) -蒜苗 ...

  5. ABP初始化

    默认认为你手中已经有abp-zero项目,当前4.6.0 angularJS切换到jquery 运行项目,初始化是跳转到~/App/common/views/layout/layout.cshtml, ...

  6. python 将中文转拼音后填充到url做参数并写入excel

    闲着没事写了个小工具,将中文转拼音后填充到url做参数并写如excel 一.先看下演示,是个什么东西 二.代码 代码用到一个中文转拼音的库,库是网上下的,稍微做了下修改,已经找不原来下载的地址了,然后 ...

  7. 为.net mvc core 启用 https

    引用nuget包:Microsoft.AspNetCore.Server.Kestrel.Https这是一个服务器测试ssl密钥,密码如代码里面所示 using System; using Syste ...

  8. mysql动态执行sql批量删除数据

    CREATE PROCEDURE `sp_delete_pushmsg_data`() BEGIN ); ); declare l_dutyno int; ; ; ; ; day),'%Y-%m-%d ...

  9. 在Excel表格中打字为何会被覆盖掉

    修改证件图片背景:https://www.cnblogs.com/liyanbin/p/9466746.html Insert键是插入和改写(覆盖)的开关如果当前处于改写(覆盖)模式,再按一下Inse ...

  10. vue-router的基本使用和配置

    1.在main.js文件中引入相关模块以及组件及实例化vue对象配置选项路由及渲染App组件 默认设置如下: import Vue from 'vue' import App from './App' ...