react: typescript jest && enzyme
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的更多相关文章
- react typescript jest config (一)
1. initialize project create a folder project Now we'll turn this folder into an npm package. npm in ...
- react 单元测试 (jest+enzyme)
为什么要做单元测试 作为一个前端工程师,我是很想去谢单元测试的,因为每天的需求很多,还要去编写测试代码,感觉时间都不够用了. 不过最近开发了一个比较复杂的项目,让我感觉一旦项目大了.复杂了,而且还是多 ...
- 搭建 Jest+ Enzyme 测试环境
1.为什么要使用单元测试工具? 因为代码之间的相互调用关系,又希望测试过程单元相互独立,又能正常运行,这就需要我们对被测函数的依赖函数和环境进行mock,在测试数据输入.测试执行和测试结果检查方面存在 ...
- react + typescript 学习
react,前端三大框架之一,也是非常受开发者追捧的一门技术.而 typescript 是 javascript 的超集,主要特点是对 类型 的检查.二者的结合必然是趋势,不,已经是趋势了.react ...
- React + Typescript领域初学者的常见问题和技巧
React + Typescript领域初学者的常见问题和技巧 创建一个联合类型的常量 Key const NAME = { HOGE: "hoge", FUGA: "f ...
- 【每天学一点-04】使用脚手架搭建 React+TypeScript+umi.js+Antd 项目
一.使用脚手架搭建项目框架 1.首先使用脚手架搭建React项目(React+TypeScript+Umi.js) 在控制台输入命令:yarn create @umijs/umi-app 2.引入An ...
- Jest+Enzyme React js/typescript测试环境配置案例
本文案例github:https://github.com/axel10/react-jest-typescript-demo 配置jest的react测试环境时我们可以参考官方的配置教程: http ...
- jest enzyme unit test react
1. 测试类型 单元测试:指的是以原件的单元为单位,对软件进行测试.单元可以是一个函数,也可以是一个模块或一个组件,基本特征就是只要输入不变,必定返回同样的输出.一个软件越容易些单元测试,就表明它的模 ...
- 前端自动化测试 —— TDD环境配置(React+TypeScript)
欢迎讨论与指导:) 前言 TDD -- Test-Drive Development是测试驱动开发的意思,是敏捷开发中的一项核心实践和技术,也是一种测试方法论.TDD的原理是在开发功能代码之前,先编写 ...
随机推荐
- python文件调用方法
文件输入输出 open函数可以对文本文件进行读写的操作 基本形式: open(filename,mode) filename是文件名,可以写为绝对路径也可以是相对路径 mode是打开模式. open函 ...
- 事务框架之声明事务(自动开启,自动提交,自动回滚)Spring AOP 封装
利用Spring AOP 封装事务类,自己的在方法前begin 事务,完成后提交事务,有异常回滚事务 比起之前的编程式事务,AOP将事务的开启与提交写在了环绕通知里面,回滚写在异常通知里面,找到指定的 ...
- MATLAB 图像打开保存
一.图片读取保存 (1)读取 clear all [filename,pathname]=uigetfile({'*.jpg';'*.bmp';'*.gif'},'选择图片'); if isequal ...
- Java 程序该怎么优化?(实战篇)
面试官:出现了性能问题,该怎么去排查呢? 程序猿:接口响应那么慢,时间都花到哪里去了? 运维喵:为什么你的应用跑着跑着,CPU 就接近 100%? 分享一些真实生产问题排查故事,看看能否涨姿势,能否 ...
- 普通企业的规划类项目中,OptaPlanner更适合作为APS的规划优化引擎
在企业的规划.优化场景中,均需要开发规划类的项目,实现从从种可能方案中找出相对最优方案.如排班.生产计划(包括高层次的供应链优化,到细粒度的车间甚至机台作业指令).车辆调度等.因为这类场景需要解决的问 ...
- github的学习使用以及将自己开发的app传上去。
主要参考的网址如下: https://www.cnblogs.com/sdcs/p/8270029.html https://www.cnblogs.com/sjhsszl/p/8708471.htm ...
- problems
exceptionUnable to connect to userservice.shanmaohuwai.com:80 . Error #0: stream_socket_client(): un ...
- python学习 0 python简介
一.Python简介 python是一门简单易学又功能强大的编程语言.它具有高效的高级数据结构和简单而有效的面向对象编程的特性.python优雅的语法和动态类型.以及其解释性的性质,使它在许多领域和大 ...
- easy-mock 本地部署(挤需体验三番钟,里造会干我一样,爱象节款mock)
前言 很多小伙伴问我怎么在自己公司的项目里面添加配置mock,在vue项目里面都知道怎么配置mock,在大型前端项目里面就一脸疑惑了. 我就回答他,你今天会在vue项目里面用,那天换公司是用angul ...
- TP的where方法的使用
1.Thinkphp中where()条件的使用 总是有人觉得,thinkphp的where()就是写我要进行增加.查询.修改.删除数据的条件,很简单的,其实我想告诉你,where()是写条件语句的,但 ...