写在前面:

  在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 搭建gitlab server

    以root 身份进行登录linux 1.先安装相关依赖: sudo yum install -y curl policycoreutils-python openssh-server 2.开启SSH开 ...

  2. wordpress 后台页面无法显示绑定的台湾语言

    问题:当前切换到的语言是English,然后在页面的列表中,分别显示的语言有中文和香港,没有出现台湾的图标,如上图所示 原因:在polylang插件的设置里面,可以看到台湾语言的 Language c ...

  3. GoldenGate安装配置

    GOLDENGATE安装 1. 下载与数据库对应版本的goldengate安装介质. 2. 创建goldengate系统用户,设置用户环境变量,如果是oracle,建议直接使用oracle作为用户安装 ...

  4. 2016424王启元 Exp3免杀原理与实现

    基础问题回答 1.杀软是如何检测出恶意代码的? (1)基于特征码的检测 特征码是能识别一个程序是一个病毒的一段不大于64字节的特征串.如果一个可执行文件包含这样的特征码则被杀毒软件检测为是恶意代码. ...

  5. Failed to start NodeManager caused by "/var/lib/hadoop-yarn/yarn-nm-recovery/yarn-nm-state/LOCK: Permission denied"

      Hadoop 安装步骤: 0. 安装前准备(节点机器,环境设置,yum源设置) 1. 配置并安装Cloudera-Manager 2. 启动 CM 服务 3. 安装CDH,并配置集群 4. 启动 ...

  6. Oracle 事务操作

    在看本文之前,请确保你已经了解了Oracle事务和锁的概念即其作用,不过不了解,请参考数据库事务的一致性和原子性浅析和Oracle TM锁和TX锁 1.提交事务 当执行使用commit语句可以提交事务 ...

  7. Spark on YARN模式的安装(spark-1.6.1-bin-hadoop2.6.tgz + hadoop-2.6.0.tar.gz)(master、slave1和slave2)(博主推荐)

    说白了 Spark on YARN模式的安装,它是非常的简单,只需要下载编译好Spark安装包,在一台带有Hadoop YARN客户端的的机器上运行即可.  Spark on YARN简介与运行wor ...

  8. C 六度空间理论的实现

    “六度空间”理论又称作“六度分隔(Six Degrees of Separation)”理论.这个理论可以通俗地阐述为:“你和任何一个陌生人之间所间隔的人不会超过六个,也就是说,最多通过五个人你就能够 ...

  9. css3中outline切换动画效果

    今天刚看了篇文章<纯CSS实现的outline切换transition动画效果> 里面的效果研究了一下,下图为实现时的效果 代码如下: <!DOCTYPE html> < ...

  10. git 学习之基础知识

    在前面的一个帖子中我们知道了不同的版本控制系统的不同,在这个帖子中我们会大致的了解到它们是管理各个版本的,这对我们学习 git 是很有帮助的. 对于集中式的版本控制系统来说每次的更新主要记录内容的具体 ...