写在前面:

  在git上面clone一些项目的时候老是可以看到一些测试文件,于是就学习了一下TDD;

  TDD —— Test-Drive Development是测试驱动开发的意思,是敏捷开发中的一项核心实践和技术,也是一种测试方法论。TDD的原理是在开发功能代码之前,先编写单元测试用例代码,测试代码确定需要编写什么产品代码 —— 引自百度百科,(当所有的测试用例通过了,就说明你的组件完成了)。

  实现的过程 —— 当修改组件代码的时候,自动触发,执行测试用例,实时反映结果。笔者为了“自动”两个字,去学习了前端自动化工具 gulp 跟 grunt 的区别,也进一步学习了grunt的使用,然后发现测试包 mocha 已经包括了自动触发的功能(--watch参数)。

  注意:本文应该属于开发测试阶段的内容,并不深入测试方向(什么集成测试,单元测试,跨浏览器测试,并没有去学习)。

  代码:https://github.com/miaowwwww/tdd-dome

 不使用前端自动化工具:grunt && gulp,直接使用mocha(--watch)

  学习前提: mocha, enzyme(react-addons-test-utils),  chai,

  坑:1. mocha默认不是认识es6, 需要配置 --compilers

    

    2. .babelrc文件 —— 在webpack中工作,项目代码由babel-loader实现转码,并且在webpack.config.js里面配置babel:options, 然而mocha并没有babel:options。

      因此,笔者在这里吃了大亏,解释es6,不成功,还无提示语言。简直要命了。因此需要加上.babelrc文件。

     

  展示图:

    

tdd:(react + mocha)环境配置的更多相关文章

  1. 史上最全Windows版本搭建安装React Native环境配置

    史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的 ...

  2. 史上最详细Windows版本搭建安装React Native环境配置 转载,比官网的靠谱亲测可用

    史上最详细Windows版本搭建安装React Native环境配置   2016/01/29 |  React Native技术文章 |  Sky丶清|  95条评论 |  33530 views ...

  3. React Native环境配置

    React Native环境配置 史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有 ...

  4. windows 7下React Native环境配置

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

  5. React Native环境配置和简单使用

    # 前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会 ...

  6. 基于webpack4的react开发环境配置

    一.基础配置 1.init项目 mkdir react-webpack4-cook cd react-webpack4-cook mkdir src mkdir dist npm init -y 复制 ...

  7. React开发环境配置

    本文以上一篇文章继续配置:npm安装及环境配置<https://www.cnblogs.com/hzb462606/p/11565275.html> 使用 create-react-app ...

  8. 最详细React Native环境配置及项目初始化(2018-10-14)

    注意配环境一定要全程使用稳定VPN工具,否则会浪费大量时间!!!相信我 一.截止到项目初始化之前也就是执行这条命令之前都按官网的方法就可以 https://reactnative.cn/docs/ge ...

  9. 二、react开发环境配置与webpack入门

    Webpack 模块打包工具(module bundler)功能: 将 CSS.图片与其他资源打包 打包之前预处理(Less.CoffeeScript.JSX.ES6 等)档案 依 entry 文件不 ...

  10. React Native环境配置之Windows版本搭建

    接近年底了,回想这一年都做了啥,学习了啥,然后突然发现,这一年买了不少书,看是看了,就没有完整看完的.悲催. 然后,最近项目也不是很紧了,所以抽空学习了H5.自学啃书还是很无趣的,虽然Head Fir ...

随机推荐

  1. Linux I2C驱动程序设计

    1. Linux I2C子系统架构 (1)I2C核心(I2C-Core):I2C 总线和I2C 设备驱动的中间枢纽,它提供了I2C 总线驱动和设备驱动的注册.注销方法等 (2)I2C控制器驱动(ada ...

  2. js 删除数组的某一项或者几项的方法

    1.arr.splice() splice(index,len,[item])    注释:该方法会改变原始数组. splice有3个参数,它也可以用来替换/删除/添加数组内某一个或者几个值 inde ...

  3. 仿jQuery的toggle方法

    两次点击事件进行切换 var toggle = (function () { var a = true; return function (fn1, fn2) { a = !a; var toggle ...

  4. ambari-server启动出现ERROR main] DBAccessorImpl:106 - Error while creating database accessor java.lang.ClassNotFoundException:com.mysql.jdbc.Driver问题解决办法(图文详解)

    不多说,直接上干货! 问题详情 ambari-server启动时,报如下的错误 问题分析 注:启动ambari访问前,请确保mysql驱动已经放置在/usr/share/Java内且名字是mysql- ...

  5. 快速上手:在CVM上安装Apache

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由一步 发表于云+社区专栏 介绍 Apache HTTP服务器是世界上使用最广泛的Web服务器.它提供了许多强大的功能,包括可动态加载的 ...

  6. 【c++】常识易混提示

    1. struct 和 class 唯一的区别:默认的成员保护级别和默认的派生保护级别不同(前者为public,后者为private). 2. int *p = new int[23];     de ...

  7. find ip from hostname or find hostname from ip

    1. find ip from hostname ping <hostname> 2.fin hostname from ip nslookup <ip>

  8. T_SQL 语句想已有数据表添加约束

    如果向存在数据的表里添加约束,有可能会出现数据不符合检查约束而造成添加约束失败. 如: USE DEmo--指向当前操作的数据库 GO ALTER TABLE Employee ADD CONSTRA ...

  9. C++Array类模板编写笔记

    C++Array类模板 函数模板和类模板都属于泛型技术,利用函数模板和类模板来创建一个具有通用功能的函数和类,以支持多种不同的形参,从而进一步简化重载函数的函数体设计. 声明方法:template&l ...

  10. CSS实现响应式布局(自动拆分几列)

    1.css代码 <style type="text/css"> .container{ margin-top: 10px; } .outerDiv{ float:lef ...