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. 使用Visual Studio Code + Node.js搭建TypeScript开发环境

    Visual Studio Code搭建Typescript开发环境 —— 相关文章: http://www.cnblogs.com/sunjie9606/p/5945540.html [注意:这里仅 ...

  2. 关于BUG

    1.BUG的理解 2.提高BUG report的技巧

  3. Elasticsearch之CURL命令的bulk批量操作

    大家,也可去看看我下面的博客 Elasticsearch之批量操作bulk 官网上,是举例了新建一个requests文件. [hadoop@master elasticsearch-]$ pwd /h ...

  4. Js控制样式的诸多方法

    function TableCss(options){ //如果没参数,就退出 if(arguments.length < 1 || !document.getElementById(optio ...

  5. SAS进阶《深入解析SAS》之开发多语言支持的SAS程序

    SAS进阶<深入解析SAS>之开发多语言支持的SAS程序 1. 多语言支持的应用程序是指该程序在世界给第使用时,其能够处理的数据,以及处理数据的方式.信息展现的方式都符合当地的语言.文化习 ...

  6. 1B课程笔记分享_StudyJams_2017

    课程1B 概述 课程1B主要讲解了Android UI的ViewGroups(视图组).LinearLayout(线性布局).RelativeLayout(相对布局),Portrait Mode(竖屏 ...

  7. CentOS配置网卡以及克隆

    上一篇的虚拟机安装完成后是可以上网的,但是ip地址是动态的,因为后期的需要,我们要配置下网卡,改成静态的IP地址 1.打开终端,输入 ifconfig 查看虚拟机中的网卡,发现时ens33而不是平常见 ...

  8. 01--Java开发中文乱码问题分析

    一.常见的编码格式 1. ASCII码 总共128个字符,用1个字节的低7位表示,0~31是控制字符,32~126是打印字符. 2.  ISO-8859-1 ISO组织在ASCII基础上进行扩展,仍是 ...

  9. java web项目和java项目的区别(看清IDE本质)

    想必大家在使用MyEclipse时对这两个概念不去深究.只知道是Java EE类的基本都是Web项目,而Java应用程序就是Java项目.而且很多人都愿意使用MyEclipse作为开发工具,且不说大家 ...

  10. Zabbix 默认网络发现模板修改(第三篇)

    zabbix 默认网络发现模板不能显示ip,我想让他在graph的标题上显示ip,具体要像如下效果 原文地址:http://www.cnblogs.com/caoguo/p/4977254.html ...