前端自动化测试 —— TDD环境配置（React+TypeScript）
欢迎讨论与指导：)
前言
TDD —— Test-Drive Development是测试驱动开发的意思，是敏捷开发中的一项核心实践和技术，也是一种测试方法论。TDD的原理是在开发功能代码之前，先编写单元测试用例代码，测试代码确定需要编写什么产品代码 —— 引自百度百科。
在开发时，希望能够改动项目代码或者测试代码时能够自动进行测试，并停止上一次的测试（如果有的话）。因此基本测试架构为gulp+mocha+enzyme：gulp进行文件监听，mocha为测试框架，enzyme是针对react组件测试的一个库。配合IDE，能够实现开发的同时进行测试，并能立即观察到测试结果。
本文不足：只描述出开发时的测试，对集成测试、跨浏览器测试还没有涉足。笔者努力中 O(∩_∩)O
更详尽的代码在demo git地址：https://github.com/Penggggg/tdd-demo
预览图
gulp监听
var gulp = require('gulp');
const child_process = require('child_process');
var workerProcess;
gulp.task('default',['run_test'] ,function(){
console.log('run default')
})
gulp.task('run_test', function(){
gulp.watch(['src/**','test/**']) // 自定义监听文件，一个是项目代码，一个是测试代码
.on('change', function( ){
runTest( );
})
runTest( );
})
function runTest( ) {
// 杀掉上一次测试
try{ if( workerProcess!==undefined || workerProcess!==null ) {workerProcess.kill( );} }catch(e) { }
// 重启测试
workerProcess = child_process.exec(
'mocha --compilers ts:ts-node/register ./test/**/*.test.tsx --require ./config/dom.env.js', function( error, stdout, stderr ) {
if ( error ) { console.log( error.stack )}
console.log( stdout );
console.log( stderr )
})
}
mocha环境配置
由于是和Typescript进行配合，测试代码需要进行ts的编译，因此需要下载 ts-node 和测试框架 mocha （上文的倒数第6行代码）。
enzyme环境配置
小坑 1：测试文件后缀要写为 .tsx 而不是 .ts ，否则组件的尖括号无法被解析 let c = shallow(<Counter />);
小坑 2 ：需要预先配置好dom环境并在启动mocha时首先加载 'mocha --compilers ts:ts-node/register ./test/**/*.test.tsx --require ./config/dom.env.js'
// dom.env.js
var jsdom = require('jsdom');
if (typeof document === 'undefined') {
global.document = jsdom.jsdom('<!doctype html><html><body></body></html>');
global.window = document.defaultView;
global.navigator = global.window.navigator;
}
IDE配合
如果想一边编码一边能看到测试效果就需要IDE配合了（如上图），而不是另外开一个cmd。
这里推荐VSCode（F1搜索terminal并打开）和Atom（安装atom-terminal插件）
前端自动化测试 —— TDD环境配置（React+TypeScript）的更多相关文章
- APP自动化测试的环境配置
什么是Appium? 第三方自动化框架(工具),扩充了selenium webdriver 协议,在原有的基础上添加了移动端测试API selenium webdriver 指定了客户端到服务端的协议 ...
- win10环境配置react
1 react 需要nodejs所以需要安装nodejs环境,到nodejs官网下载 现在默认会安装nodejs 和 npm包 和 配置环境 2 检查是否安装成功,在命令行中输入 显示成功则正确 3 ...
- 前端基础入门第一阶段-Web前端开发基础环境配置
Web前端和全栈的定义: A.什么是传统传统web前端:需要把设计师的设计稿,切完图,写标签和样式,实现JS的效果,简而言之即只需要掌握HTML的页面结构,CSS的页面样式,javaScript页面的 ...
- Vue 前端uni-app多环境配置部署服务器的问题
目录 前端Vue 针对问题 package.json描述 多环境部署 查看源码获取解决方案 转载请标明出处: http://dujinyang.blog.csdn.net/ 本文出自:[奥特曼超人的博 ...
- 前端开发本地环境配置(Apache+Dreamweaver)
一.安装apache服务器 1.下载apache软件: 2.安装,直接下一步就好: 3.安装好后找到安装文件夹下的conf文件中的httpd.conf: 4.打开httpd.conf文件,做以下修改: ...
- 前端快闪三：多环境灵活配置react
你已经使用Create React App脚手架搭建了React应用,现在该部署了. 一般会使用npm run build或者yarn build构建出静态资源, 由web服务器承载. 您会体验到 多 ...
- windows 7下React Native环境配置
React Native 是 Facebook 推出的一个用 Java 语言就能同时编写 ios,android,以及后台的一项技术,它可以做到实时热更新 .FaceBook 也号称这们技术是 “Le ...
- 手把手教你webpack、react和node.js环境配置（上篇）
很多人刚学习react的时候,往往因为繁琐的配置而头疼,这里我将手把手教大家怎么用webpack配置react和redux的环境,这篇教程包括前端react和后台node整个网站的环境配置,对node ...
- 手把手教你webpack、react和node.js环境配置（下篇）
上篇我介绍了前端下webpack和react.redux等环境的配置,这篇将继续重点介绍后台node.js的配置. 这里是上篇链接:手把手教你webpack.react和node.js环境配置(上篇) ...
随机推荐
- C# 合并及拆分Word文档
本文简要分析一下如何如何使用C#简单实现合并和拆分word文档.平时我们在处理多个word文档时,可能会想要将两个文档合并为一个,或者是将某个文档的一部分添加到另一个文档中,有的时候也会想要将文档拆分 ...
- 图的生成树（森林）（克鲁斯卡尔Kruskal算法和普里姆Prim算法）、以及并查集的使用
图的连通性问题:无向图的连通分量和生成树,所有顶点均由边连接在一起,但不存在回路的图. 设图 G=(V, E) 是个连通图,当从图任一顶点出发遍历图G 时,将边集 E(G) 分成两个集合 T(G) 和 ...
- Vertica 分区表设计(续)
在上篇Vertica 分区表设计中,已经提过了Vertica的分区表创建和分区删除,但举例上并不系统, 本篇文章将系统的对分区表设计及后续的删除分区进行讲解. 概述:Vertica分区表(天和月)创建 ...
- Cesium教程系列汇总
Cesium系列目录: 应用篇 入门 Cesium应用篇:1快速搭建 影像 Cesium应用篇:2影像服务(上) Cesium应用篇:2影像服务(下) 控件 Cesium应用篇:3控件(1)Clock ...
- 安卓Design包之超强控件CoordinatorLayout与SnackBar的简单使用
在前面的Design中,学习使用了TabLayout,NavigationView与DrawerLayout实现的神奇效果,今天就带来本次Design包中我认为最有意义的控件CoordinatorLa ...
- mvc 重定向的几种方式
在RouteConfig添加一个简单的路由 //新增路由 routes.MapRoute( name: "Article", url: "Detial/{id}" ...
- C#中HttpClient使用注意：预热与长连接
最近在测试一个第三方API,准备集成在我们的网站应用中.API的调用使用的是.NET中的HttpClient,由于这个API会在关键业务中用到,对调用API的整体响应速度有严格要求,所以对HttpCl ...
- Xcode7.1环境下上架iOS App到AppStore 流程③(Part 三)
前言部分 part三 部分主要讲解 Xcode关联绑定发布证书的配置.创建App信息.使用Application Loader上传.ipa文件到AppStore 一.Xcode配置发布证书信息 1)给 ...
- PHP基础知识第二趴
下期预告,函数...
- 《连载 | 物联网框架ServerSuperIO教程》- 10.持续传输大块数据流的两种方式（如：文件）
1.C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍 <连载 | 物联网框架ServerSuperIO教程>1.4种通讯模式机制. <连载 | 物联网框架Serve ...