Install Jest

1、install jest dependencies

jest @types/jest ts-jest -D

2、jest.config.js

module.exports = {
"roots": [
"<rootDir>/src"
],
"transform": {
"^.+\\.tsx?$": "ts-jest"
},
"testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
]
}

3、test jest

foo.ts

export const sum = (...args) => args.reduce((acc, val) => acc+val, 0)

foo.test.ts

import {sum } from "./foo";
test("basic", () => {expect(sum()).toBe(0)})
test("basic begin", () => {expect(sum(1,2,3)).toBe(6)})

Install Enzyme

1、install enzyme dependencies

enzyme @types/enzyme enzyme-to-json enzyme-adapter-react-16 @types/enzyme-adapter-react-16

2、configue enzyme setup-test.ts

import { configure } from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16'; configure({ adapter: new Adapter() });

3、update jest.config.js

module.exports = {
"roots": [
"<rootDir>/src"
],
"setupFileAfterEnv": ["<rootDir>/setup-test.ts"]
"transform": {
"^.+\\.tsx?$": "ts-jest"
},
"testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
"snapshotSerializers": ["enzyme-to-json/serializer"],
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
]
}

4、update tsconfig.js

"exclude": **/*.test.ts""

react: typescript jest && enzyme的更多相关文章

  1. react typescript jest config (一)

    1. initialize project create a folder project Now we'll turn this folder into an npm package. npm in ...

  2. react 单元测试 (jest+enzyme)

    为什么要做单元测试 作为一个前端工程师,我是很想去谢单元测试的,因为每天的需求很多,还要去编写测试代码,感觉时间都不够用了. 不过最近开发了一个比较复杂的项目,让我感觉一旦项目大了.复杂了,而且还是多 ...

  3. 搭建 Jest+ Enzyme 测试环境

    1.为什么要使用单元测试工具? 因为代码之间的相互调用关系,又希望测试过程单元相互独立,又能正常运行,这就需要我们对被测函数的依赖函数和环境进行mock,在测试数据输入.测试执行和测试结果检查方面存在 ...

  4. react + typescript 学习

    react,前端三大框架之一,也是非常受开发者追捧的一门技术.而 typescript 是 javascript 的超集,主要特点是对 类型 的检查.二者的结合必然是趋势,不,已经是趋势了.react ...

  5. React + Typescript领域初学者的常见问题和技巧

    React + Typescript领域初学者的常见问题和技巧 创建一个联合类型的常量 Key const NAME = { HOGE: "hoge", FUGA: "f ...

  6. 【每天学一点-04】使用脚手架搭建 React+TypeScript+umi.js+Antd 项目

    一.使用脚手架搭建项目框架 1.首先使用脚手架搭建React项目(React+TypeScript+Umi.js) 在控制台输入命令:yarn create @umijs/umi-app 2.引入An ...

  7. Jest+Enzyme React js/typescript测试环境配置案例

    本文案例github:https://github.com/axel10/react-jest-typescript-demo 配置jest的react测试环境时我们可以参考官方的配置教程: http ...

  8. jest enzyme unit test react

    1. 测试类型 单元测试:指的是以原件的单元为单位,对软件进行测试.单元可以是一个函数,也可以是一个模块或一个组件,基本特征就是只要输入不变,必定返回同样的输出.一个软件越容易些单元测试,就表明它的模 ...

  9. 前端自动化测试 —— TDD环境配置(React+TypeScript)

    欢迎讨论与指导:) 前言 TDD -- Test-Drive Development是测试驱动开发的意思,是敏捷开发中的一项核心实践和技术,也是一种测试方法论.TDD的原理是在开发功能代码之前,先编写 ...

随机推荐

  1. Tarjan算法(模板)

    算法思想: 首先要明确强连通图的概念,一个有向图中,任意两个点互相可以到达:什么是强连通分量?有向图的极大连通子图叫强连通分量. 给一个有向图,我们用Tarjan算法把这个图的子图(在这个子图内,任意 ...

  2. java NIO理解分析与基本使用

    我前段时间的一篇博客java网络编程--多线程数据收发并行总结了服务端与客户端之间的收发并行实践.原理很简单,就是针对单一客户端,服务端起两个线程分别负责read和write操作,然后线程保持阻塞等待 ...

  3. mybatis入门四 解决字段名与实体类属性名不相同的冲突

    一.创建测试需要使用的表和数据 CREATE TABLE orders( order_id INT PRIMARY KEY AUTO_INCREMENT, order_no VARCHAR(20), ...

  4. JQuery主要内容

    一.什么是JQuery jquery全称javaScript Query,是js的一个框架,本质上仍然是js 二.jQuery的特点 支持各种主流浏览器 使用特别简单 拥有丰富的插件和边界的插件扩展机 ...

  5. 字典树基础进阶全掌握(Trie树、01字典树、后缀自动机、AC自动机)

    字典树 概述     字典树,又称单词查找树,Trie树,是一种树形结构,是一种哈希树的变种.典型应用是用于统计,排序和保存大量的字符串(但不仅限于字符串),所以经常被搜索引擎系统用于文本词频统计.它 ...

  6. C、Guard the empire(贪心)

    链接:https://ac.nowcoder.com/acm/contest/3570/C 来源:牛客网 题目描述 Hbb is a general and respected by the enti ...

  7. yii2框架学习笔记

    1.去掉yii2模版默认的头部和脚部的两种方法: (1) 第一种 $this->layout = false; $this->render('index'); (2) 第二种(partia ...

  8. mpvue怎么使用iconfont

    原文链接:https://blog.csdn.net/weixin_39818813/article/details/80695750 1.首先去阿里巴巴矢量图标库区把你要图标加到购物车 阿里巴巴矢量 ...

  9. django内置的分页功能

    django内置的分页功能 # 先导入需要查询的模型类 from game.models import Score # 导入内置的分页功能 from django.core.paginator imp ...

  10. UC接口文档

    UC接口文档 一.功能描述 提供同步登录.退出.注册等相关接口,可以实现用户一个账号,在一处登录,全站通行. 二.测试环境UC地址 http://s1.p5w.net/uc/ 三.相关接口 UC_AP ...