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. Azure Web: 数据库的创建与数据监控

    介绍主题:Azure 大家都知道Azure云现在由于中国国策不一样,会有中国版Azure云和国际版Azure. 但是我们今天基于这个国际版的讲,因为我这个博客会比较international一点.(- ...

  2. 面试刷题28:如何写出安全的java代码?

    对jdk,jvm,java应用程序的攻击多种多样?那么从java程序员的角度,如何写出安全的代码呢? 我是李福春,我在准备面试,今天的题目是:如何写出安全的java代码? 答:这个需要从功能设计到实现 ...

  3. iOS 页面流畅技巧(2)

    一.屏幕显示图像的原理 首先从过去的 CRT 显示器原理说起.CRT 的电子枪按照上面方式,从上到下一行行扫描,扫描完成后显示器就呈现一帧画面,随后电子枪回到初始位置继续下一次扫描.为了把显示器的显示 ...

  4. iOS isa 和 Class

    一.Runtime 简介 Runtime 又叫运行时,是一套底层的 C 语言 API,是 iOS 系统的核心之一.开发者在编码过程中,可以给任意一个对象发送消息,在编译阶段只是确定了要向接收者发送这条 ...

  5. MySql查询当天、本周、本月、本季度、本年的数据

    1.今天 SELECT * FROM 表名 WHERE TO_DAYS(时间字段名) = TO_DAYS(NOW()); 2.昨天 ; 3.本周 SELECT * FROM 表名 WHERE YEAR ...

  6. dp例题03. 最大子矩阵和

    题目Description: 给出一个矩阵, 求子矩阵(可以是其本身)数之和的最大值 Input: 第一行 为行数n和列数m       (n≤500, m≤500) 接下来为一个n行m列的矩阵 (每 ...

  7. Oracle给权限和同义词

    在同一个DB下,用户A创建了一个Table(student),用户B无法访问.如果B想要访问,就需要A赋予B权限. 登录用户A执行下面语句: GRANT SELECT, INSERT, UPDATE, ...

  8. Java 混淆器

    在脑海中假想一下,在你苦苦经历 81 难,摸爬滚打研制的技术轮子,终于成型得以问世,遂打个 JAR 包投放于万网之中.可是没过几天,同样功能的轮子出现在你的眼前,关键是核心代码都一样,此时你的内心是否 ...

  9. binlog的作用及与redo log的区别

    区别 二进制日志(bin log)会记录所有与MySQL数据库有关的日志记录,包括InnoDB.MyISAM.Heap等其他存储引擎的日志.而InnoDB存储引擎的重做日志只记录有关该存储引擎本身的事 ...

  10. python--模块、列表生成式、集合元祖列表

    一.导入模块的两种方式 1.直接使用import import 模块名 #调用 模块名.方法名() 2.使用from…import… from 模块名 import 方法名1,方法名2(from 模块 ...