欢迎讨论与指导：)

　　前言

　　　　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）的更多相关文章

  1. APP自动化测试的环境配置

    什么是Appium? 第三方自动化框架(工具),扩充了selenium webdriver 协议,在原有的基础上添加了移动端测试API selenium webdriver 指定了客户端到服务端的协议 ...

  2. win10环境配置react

    1 react 需要nodejs所以需要安装nodejs环境,到nodejs官网下载 现在默认会安装nodejs 和 npm包 和 配置环境 2 检查是否安装成功,在命令行中输入 显示成功则正确 3 ...

  3. 前端基础入门第一阶段-Web前端开发基础环境配置

    Web前端和全栈的定义: A.什么是传统传统web前端:需要把设计师的设计稿,切完图,写标签和样式,实现JS的效果,简而言之即只需要掌握HTML的页面结构,CSS的页面样式,javaScript页面的 ...

  4. Vue 前端uni-app多环境配置部署服务器的问题

    目录 前端Vue 针对问题 package.json描述 多环境部署 查看源码获取解决方案 转载请标明出处: http://dujinyang.blog.csdn.net/ 本文出自:[奥特曼超人的博 ...

  5. 前端开发本地环境配置(Apache+Dreamweaver)

    一.安装apache服务器 1.下载apache软件: 2.安装,直接下一步就好: 3.安装好后找到安装文件夹下的conf文件中的httpd.conf: 4.打开httpd.conf文件,做以下修改: ...

  6. 前端快闪三：多环境灵活配置react

    你已经使用Create React App脚手架搭建了React应用,现在该部署了. 一般会使用npm run build或者yarn build构建出静态资源, 由web服务器承载. 您会体验到 多 ...

  7. windows 7下React Native环境配置

    React Native 是 Facebook 推出的一个用 Java 语言就能同时编写 ios,android,以及后台的一项技术,它可以做到实时热更新 .FaceBook 也号称这们技术是 “Le ...

  8. 手把手教你webpack、react和node.js环境配置（上篇）

    很多人刚学习react的时候,往往因为繁琐的配置而头疼,这里我将手把手教大家怎么用webpack配置react和redux的环境,这篇教程包括前端react和后台node整个网站的环境配置,对node ...

  9. 手把手教你webpack、react和node.js环境配置（下篇）

    上篇我介绍了前端下webpack和react.redux等环境的配置,这篇将继续重点介绍后台node.js的配置. 这里是上篇链接:手把手教你webpack.react和node.js环境配置(上篇) ...

随机推荐

  1. 前端精选文摘：BFC 神奇背后的原理

    BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...

  2. nodejs中使用http请求返回值为html时乱码问题

    今天用nodejs进行http请求时返回的数据是一个html文件,然后我还是按照以前解析json数据的方法.果不其然报错了:SyntaxError: Unexpected token  in JSON ...

  3. Android立体旋转动画实现与封装（支持以X、Y、Z三个轴为轴心旋转）

    本文主要介绍Android立体旋转动画,或者3D旋转,下图是我自己实现的一个界面 立体旋转分为以下三种: 1. 以X轴为轴心旋转 2. 以Y轴为轴心旋转 3. 以Z轴为轴心旋转--这种等价于andro ...

  4. RedisRepository封装—Redis发布订阅以及StackExchange.Redis中的使用

    本文版权归博客园和作者本人吴双共同所有,转载请注明本Redis系列分享地址.http://www.cnblogs.com/tdws/tag/NoSql/ Redis Pub/Sub模式 基本介绍 Re ...

  5. JavaWeb_day03_员工信息添加修改删除

    day03员工的添加,修改,删除 修改功能 思路 : 点击修改员工数据之后,跳转到单行文本,查询要修改的员工id的全部信息,主键id设置为readonly,其余的都可以修改, 修改之后,提交按钮,提交 ...

  6. java 开发业务逻辑的思考（1）- 通知短信发送

    坚持每天写一个总结的博客,今天又是一个新的开始! 今天我要说的是一个关于发送短信通知发送的问题.具体的业务流程是这样的,现在需要对用户的一个提现的申请进行审核,审核的内部需要控制很多的业务, 1.检查 ...

  7. spring四种依赖注入方式

    一.Set注入 这是最简单的注入方式,假设有一个SpringAction,类中需要实例化一个SpringDao对象,那么就可以定义一个private的SpringDao成员变量,然后创建SpringD ...

  8. Web Service随笔

    什么是Web Service? WebService是一个SOA(面向服务的编程)的架构,它是不依赖于语言,不依赖于平台,可以实现不同的语言间的相互调用,通过Internet进行基于Http协议的网络 ...

  9. tomcat 504 gateway time-out

    今天有个环境ajax调用一个请求的时候,出现一个504 gateway time-out响应,原以为是nginx找不到资源的问题,恰当我们的服务器上又配置了nginx,看了配置文件,没有指向tomca ...

  10. WCF实现事件通知相关应用技巧介绍

    WCF实现事件通知是一个比较容易掌握的知识点,不过在实现的过程中,我们还是需要注意一些事项,以保证功能的完善性. WCF中有一些方法的应用对于初学者来说还是比较容易应用.只要熟练的联系这些方法操作,一 ...