写在前面:

  在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. rsa字符串格式公钥转换python rsa库可识别的公钥形式

    在爬虫分析的时候,经常在网页上看到如下格式的rsa公钥: MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDC7kw8r6tq43pwApYvkJ5laljaN9BZb21 ...

  2. 常用sql记录

    一.修改字段默认值 alter table 表名 drop constraint 约束名字   ------说明:删除表的字段的原有约束 alter table 表名 add constraint 约 ...

  3. 基于 IEEE 754 标准的 单精度浮点数计算方式 (未完成)

    def dec2bin(dec): if dec < 0: s = ' dec = dec * (-1) else: s = ' e = 127 dec = float(dec) r = int ...

  4. linux忘记root密码怎么办

    如何找回root密码,如果我们不小心,忘记root密码,怎么找回? 思路:进入到单用户模式,然后修改root密码.因为进入单用户模式,root不需要密码就可以登录. 详细过程: 1.打开虚拟机 2.开 ...

  5. TSM_ISSUE_123

    dsmc 命令详解http://www-ik.fzk.de/~apel/html/adsm_manual.htmlTSM InfoCenterhttp://www-01.ibm.com/support ...

  6. springboot实现服务器端消息推送(H5原生支持)

    随着互联网的发展,传统的HTTP协议已经很难满足Web应用日益复杂的需求了.近年来,随着HTML5的诞生,WebSocket协议被提出,它实现了浏览器与服务器的全双工通信,扩展了浏览器与服务端的通信功 ...

  7. Oracle Net Configuration(监听程序和网络服务配置)

    1.在Oracle服务端和客户端都安装完之后,就需要配置监听程序和本地网络服务,以便外部程序和工具的访问,所以Oracle提供了两款自带的工具来配置它们分别是 Net Configuration.Ne ...

  8. oracle 层次化查询(生成菜单树等)

    1.简介:Oracle层次化查询是Oracle特有的功能实现,主要用于返回一个数据集,这个数据集存在树的关系(数据集中存在一个Pid记录着当前数据集某一条记录的Id). 2.层次化查询主要包含两个子句 ...

  9. Robot Framework_Ride(Edit标签)

    前言 RIDE 作为 Robot Framework 的“脸面”,虽然我们已经可以拿它来创建和运行测试了,但我们对它的认识并不全面,这一小节我们将了解这个工具的使用 Edit标签 下面我们来看一看测试 ...

  10. python输出不换行

    python输出不换行 Python2的写法是: print 'hello', Python3的写法是: print('hello', end='') 对于python2和python3都兼容的写法是 ...