React Testing All in One

React 测试

https://reactjs.org/docs/testing.html

jest

26.4

https://jestjs.io/zh-Hans/

https://jestjs.io/docs/zh-Hans/tutorial-react

$ yarn add -D react-test-renderer


$ yarn add -D jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer

package.json

{

  "dependencies": {

    "react": "<current-version>",

    "react-dom": "<current-version>"

  },

  "devDependencies": {

    "@babel/preset-env": "<current-version>",

    "@babel/preset-react": "<current-version>",

    "babel-jest": "<current-version>",

    "jest": "<current-version>",

    "react-test-renderer": "<current-version>"

  },

  "scripts": {

    "test": "jest"

  }


// babel.config.js

module.exports = {

  presets: ['@babel/preset-env', '@babel/preset-react'],

};

refs

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

React Testing All in One的更多相关文章

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

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

  2. [React Testing] Children with Shallow Rendering

    When testing React components, we often want to make sure the rendered output of the component match ...

  3. [React Testing] JSX error diffs -- expect-jsx library

    When writing React component tests, it can be hard to decipher the error diffs of broken tests, sinc ...

  4. [React Testing] Intro to Shallow Rendering

    In this lesson, we walk through how to use one of React's Test Utilities (from thereact-addons-test- ...

  5. [React Testing] Setting up dependencies && Running tests

    To write tests for our React code, we need to first install some libraries for running tests and wri ...

  6. [React & Testing] Simulate Event testing

    Here we want to test a toggle button component, when the button was click, state should change, styl ...

  7. [React & Testing] Snapshot testings

    For example we have a React comonent: -- A toggle button, we want to test. When it si toggle on, the ...

  8. [React Testing] The Redux Store - Multiple Actions

    When using Redux, we can test that our application state changes are working by testing that dispatc ...

  9. [React Testing] Conditional className with Shallow Rendering

    Often our components have output that shows differently depending on the props it is given; in this ...

随机推荐

  1. IDEA_2019.1版本中Protobuf的使用

    一.Protobuf是什么 Protobuf 是 Google 发布的开源项目,全称 Google Protocol(/'prəʊtəkɒl/,协议,草案) Buffers,是一种轻便高效的结构化数据 ...

  2. 如何使用 Vuepress

    项目结构 ├─docs │ ├─.vuepress --vuepress相关文件路径 (主要配置) │ │ ├─dist --build 打包生成路径 (自定义) │ │ ├─nav --导航条配置 ...

  3. MySQL的双主配置

    配置MySQL双主配置,需要先配置MySQL的主从复制,传送门: 0.集群规划 hadoop105 hadoop106 hadoop107 MySQL(master,slave) MySQL(slav ...

  4. 配置HDFS的HA

    配置前准备: -- 配置hadoop -- 配置ZooKeeper,传送门:https://www.cnblogs.com/zhqin/p/11906106.html 安装配置好hadoop和ZooK ...

  5. Spring Cloud系列之Commons - 1. 背景与基础知识准备

    本文基于 Spring Cloud 2020.0 发布版的依赖 本系列会深入分析 Spring Cloud 的每一个组件,从Spring Cloud Commons这个 Spring Cloud 所有 ...

  6. SpringMVC听课笔记（九：数据转换 & 数据格式化 & 数据校验）

    1.数据绑定流程 --1). Spring MVC主框架将ServletRequest对象及目标方法入参实例传递给WebDataBinderFactory实例,以创建DataBinder实例对象. - ...

  7. tp5项目部署Linux环境后无法访问解决

    一.编辑fastcgi.conf文件 vim /www/server/nginx/conf/fastcgi.conf 二.添加代码 fastcgi_param PHP_ADMIN_VALUE &quo ...

  8. Linux命令之Crontab定时任务，利用Crontab定时执行spark任务

    Linux命令之Crontab定时任务,利用Crontab定时执行spark任务 一.Linux命令之Crontab定时任务 1.1 常见Crontab任务 1.1.1 安装crontab 1.1.2 ...

  9. JS从后台获取数据，前台动态添加tr标签中的td标签

    功能描述: 要求从后台查询该省份的所有城市,然后动态的再前台固定的tr标签中添加相应的td标签来展示城市基本信息: 文章目录 #一.前台jsp及js源码 jsp:在固定的tr标签中添加一个id,通过j ...

  10. python模块----pymysql模块 （连接MySQL数据库）

    pymysql模块是专门用来连接mysql数据库的模块,是非标准库模块,需要pip下载 下载 pip install pymysql 查询 import pymysql # 打开数据库连接 db = ...