Mocha 的简介 Mocha是流行的JavaScript测试框架之一,通过它添加和运行测试,从而保证代码质量 Mocha 的安装与配置 全局安装Mocha npm install -g mocha 项目中也安装Mocha npm install --save-dev mocha 在package.json中加入下面脚本: "scripts": { "test": "mocha" } Mocha 的使用 在使用前,我们先看一下我们用来使用的测试项…

React项目的单元测试 React的组件结构和JSX语法,对上一章的内容来讲进行测试显得很勉强. React官方已经提供了一个测试工具库:react-dom/test-utils 只是用起来不够方便,于是有了一些第三方的封装库,比如Airbnb公司的Enzyme 测试项目的配置 本次测试项目是根据上一章的测试项目衍生而来,包含上一章讲到的Mocha和chai,这里只介绍新加的一些模块. 项目结构图如下: 因为是React项目,所以自然需要安装React的一些东西: npm install --…

前端测试存在的问题 在讲Sinon之前,我们得先讲一下在学习了Mocha.chai以及enzyme之后,我们的前端测试还存在的一些问题. 比如前台测试需要与后台交互,获取后台数据后再根据相应数据进行测试. 又比如一个函数测试依赖另一个函数,我们可以根据测试的目的去模拟另一个函数,讲两者的测试分开,从而达到测试中也能解耦的目的. 测试辅助工具Sinon Sinon是用来辅助我们进行前端测试的,在我们的代码需要与其他系统或者函数对接时,它可以模拟这些场景,从而使我们测试的时候不再依赖这些场景. Si…

jest jest是facebook推出的一款测试框架,集成了前面所讲的Mocha和chai,jsdom,sinon等功能. 安装 npm install --save-dev jest npm install -g jest 基本用法 和之前介绍的mocha和chai的功能很像,甚至可以兼容mocha和chai的语法. test('两数相加结果为两个数字的和', () => { expect(addNum(1, 2)).toBe(3); }); 运行命令jest后会自动运行.test.js和.…

Karma 官方介绍 A simple tool that allows you to execute JavaScript code in multiple real browsers. 即一个允许你在多个真实浏览器中执行js代码的简单工具. 使用了karma之后,我们之前为了Enzyme的mount而要求的环境就不需要用jsdom去模拟了,因为karma就是将测试js在真实浏览器中执行的. 安装: npm i --save-dev karma karma-chai karma-webpack…

引言 随着前端工程化这一概念的产生,项目开发中前端的代码量可谓是'急剧上升',所以在这种情况下,我们如何才能保证代码的质量呢,对于框架,比如React.Vue,因为有自己的语法规则,及时每个开发人员的编码风格规范各不相同,但最终的产出都大同小异,代码质量差距不是很大:但对于一些基础类库或方法的开发,我们就要谨慎又谨慎,代码质量一定要高,尽量避免出现Bug. 那我们如何做到产出高质量代码呢?单元测试才是正解,俗话说'跳过单元测试和不仔细过冒烟就交由QA测试的,就是在耍流氓'(这句话是我自己编的):…

在WebStorm中集成Karma+jasmine进行前端单元测试 前言 好久没有写博了,主要还是太懒=.=,有点时间都去带娃.看书了,今天给大家分享一个原创的小东西,如果大家对TDD或者BDD有兴趣,可以也尝试一下哦. PS:附上小女萌图一张:^_^ 使用的工具/框架 webstorm 这个做前端的童鞋们应该都比较熟悉了吧,jetBrain出品的IDE神器,做Web开发.Node.js开发都可以.功能十分强大,我们今天的测试框架就是要与它集成,实现“开发的同时自动测试”.下面给出一些相关的资料…

不用搭环境的10分钟AngularJS指令简易入门01(含例子) `#不用搭环境系列AngularJS教程01,前端新手也可以轻松入坑~阅读本文大概需要10分钟~` AngularJS的指令是一大特色之一,可以将控件组合封装并简易调用.不难入门,而且用起来很爽!这次我带各位童鞋一步步学会AngularJS的指令系统. 前置技能需求:HTML.CSS.JS基础,没错不用会Angular也行!(逃 一.史上最简单入门 指令是 扩展具有自定义功能的 HTML 元素的途径.换个说法,简单来说就是把一堆组…

从网上找了很多例子关于单元测试,都是如何新建项目的时候的添加单元测试,用vue-cli中怎么添加,但是我的项目已经生成了,不能再一次重新初始化,这时如何添加单元测试,这里面遇到了好多坑,写在这里记录一下心得. 1.用vue-cli生成一个新的项目,把单元测试需要的文件直接复制到你的项目中 vue init webpack vuetest 文件下载地址 源代码Github链接 2.安装Karma+Mocha模块,这个模块依赖比较多,我在遇到了坑,解决问题半天发现缺少了某个模块,在这里全部列出需要的…

Jest和enzyme 前端单元测试工具 什么是Jest? Jest是一个令人愉悦的JavaScript测试框架,其重点是简单性. 它适用于使用以下项目的项目:Babel,TypeScript,Node,React,Angular,Vue等! 特点 零配置 快照 隔离的 很棒的api 入门 使用yarn以下命令安装Jest : yarn add --dev jest 或npm: npm install --save-dev jest 或者全局global安装 例子 function sum(a,…