写在前面:

  在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. Oracle 备份还原

    导出整个数据库,在CMD命令窗口执行 EXP 用户名/密码@服务名(数据库) FULL=Y FILE=路径 EXP INTERFACE/INTERFACE@PIVAS_XMDWYY FULL=Y FI ...

  2. Mac显示隐藏的文件夹

    方法一: 第一步:打开「终端」应用程序.第二步:输入如下命令:defaults write com.apple.finder AppleShowAllFiles -boolean true ; kil ...

  3. Removable Storage Devices文件夹删除方法

    Windows10的桌面上出现了名为“Removable Storage Devices”的文件夹删除方法 比较莫名奇妙,突然桌面上出现了名为“Removable Storage Devices”的文 ...

  4. VUE安装步骤

    项目构建 项目推荐直接使用 Vue 官方提供的脚手架(Vue-cli),所以第一步首先是安装脚手架.在命令行或者 IDE 的 Terminal 窗口中输入以下命令即可自动安装: npm install ...

  5. docker安装mongo初体验

    1.docker安装在此不做介绍,请自行百度:个人环境是在windows下运行cmd执行docker命令2.打算在docker下安装使用mongo,顺带熟悉docker,拉开篇章3.docker下安装 ...

  6. 那些H5用到的技术(3)——屏幕场景滑动

    前言Swiper.js一些需要我们手动设置的参数排版元素需要设置position:absolute绝对元素定位swiperAnimate方法的使用动画播放完成之后的监听上滑提示屏幕适配的问题Anima ...

  7. Robot Framework自动化测试四(分层思想)

    谈到Robot  Framework 分层的思想,就不得不提“关键字驱动”. 关键字驱动: 通过调用的关键字不同,从而引起测试结果的不同. 在上一节的selenium API 中所介绍的方法其实就是关 ...

  8. 转 功能强大的shell:if条件语句

    原文 http://blog.zol.com.cn/2322/article_2321767.html 功能强大的shell:if条件语句 if语句测试条件,测试条件返回真(0)或假(1)后,可相应执 ...

  9. Intel GPA 抓取3d模型

    原文链接在这里 http://dev.cra0kalo.com/?p=213 背景信息 Intel的GPA本身是一款图形分析软件,并没有设计从3D程序里抓取模型资源的功能,但这里作者是通过hook G ...

  10. vue-cli 基础搭建

    1.安装node 2.npm install webpack -g 3.npm install vue-cli -g 4.然后进入到文件下边 vue init webpack 文件名字 5.进入工程文 ...