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. (04)-Python3之--字典（dict）操作

    1.定义 字典的关键字:dict 字典由多个键和其对应的值构成的 键-值 对组成,每个键值对用冒号 : 分割,每个键值对之间用逗号 , 分割,整个字典包括在花括号 {} 中. {key1:value1 ...

  2. functools.singledispatchmethod(Python 3.8) | 码农网 https://www.codercto.com/a/83245.html

    functools.singledispatchmethod(Python 3.8) | 码农网 https://www.codercto.com/a/83245.html

  3. 深入TLS/SSL协议

    总体 TLS/SSL协议是为了解决网络通讯中的信息安全问题而诞生的. 它的设计目的主要有三个: 身份验证--搞清楚与我通讯的人是不是我所想的那个. 保密性--就算第三方拿到了通讯内容,也搞不清楚其中所 ...

  4. 日记 + sb错误

    置顶消息cpdd 1.29 完了,文化课没了 我是废物 1.28 更新了自己的副标题 前副标题:Future never has to do with past time,but present ti ...

  5. Java 执行过程中的内存模型

    一.前言 本文的主要工作:尝试以时间顺序追踪一遍 Java 执行的整个过程,以及展示 JVM 中内存模型的相应变化. 本文的主要目的:希望能够通过 Java 执行过程的冰山一角,增进对编程语言工作原理 ...

  6. JDBC连接Oracle实现增、删、改操作

    jsp页面的form表单 AddMentaction实现向数据新增数据操作 DeleteMent删除操作 UpdateMent修改操作 最近在做一个练习项目"在线考试系统",在将整 ...

  7. 华三交换机NTP配置

    clock protocol ntp ntp-service enable ntp-service unicast-server x.x.x.x clock timezone beijing add ...

  8. P2764 最小路径覆盖问题 (最小点覆盖=顶点数-最大匹配)

    题意:最小路径覆盖 题解:对于一个有向图,最小点覆盖 = 顶点数 - 最大匹配 这里的最大匹配指的是将原图中每一个点拆成入点.出点, 每条边连接起点的出点和终点的入点 源点S连接每个点的出点,汇点T连 ...

  9. Educational Codeforces Round 88 (Rated for Div. 2) A. Berland Poker（数学）

    题目链接:https://codeforces.com/contest/1359/problem/A 题意 $n$ 张牌可以刚好被平分给 $k$ 个人,其中有 $m$ 张 joker,当一个人手中的 ...

  10. Luogu T9376 区间GCD

    题目背景 无 题目描述 给定一长度为n的动态序列,请编写一种数据结构,要求支持m次操作,包括查询序列中一闭区间中所有数的GCD,与对一闭区间中所有数加上或减去一个值. 输入输出格式 输入格式: 第1行 ...