Mocha浏览器测试入门教程

Aldous 发布于2019-08-22 17:29 / 2470人阅读

摘要：在中，需要添加源代码以及断言库运行测试使用浏览器打开，就会运行测试，并且看到运行结果可知，测试通过使用命令行测试对于习惯在终端敲命令行的程序员来说，用浏览器打开去进行测试显得非常不合时宜。

摘要： 如何使用Mocha在浏览器中测试JavaScript代码？

本文所有代码都在Fundebug/mocha-browser-test仓库中。

在玩转Node.js单元测试博客中，我介绍了测试框架Mocha，对后端Node.js代码进行测试。在这篇博客，我将介绍如何使用Mocha在浏览器中测试JavaScript代码。

mocha init：初始化测试代码

安装mocha(在国内使用cnpm比npm更快):

sudo cnpm install -g mocha

执行mocha init命令，可以自动生成浏览器端的测试文件：

mocha init test

mocha会自动创建一个test目录，其中有4个文件，分别是：

mocha.js：Mocha源码

mocha.css：Mocha源码

tests.js：测试代码

index.html：浏览器测试入口页面

mocha.js与mocha.css是Mocha模块自身的源代码，因为需要在浏览器中展示测试结果，因此需要Mocha的CSS文件；tests.js为测试代码，为空文件，需要我们编写；index.html为运行测试的入门页面，使用浏览器大概它就会运行测试，并且展示测试结果。

index.html是理解Mocha浏览器测试的关键：



  
    Mocha

可知：

index.html中导入了mocha.js, mocha.css和tests.js文件；

id为mocha的div是空的，测试结果的元素会插入到这个div；

mocha.setup("bdd")指定使用Mocha的BDD接口，mocha.run()表示运行测试，测试代码tests.js必须放在两者之间，否则不会运行测试；

运行测试案例 add.js

使用mocha init生成的测试代码中没有实际的测试案例，不妨添加一个简单的add.js：

function add(a, b)
{
    return a + b;
}

可知，add是一个非常简单的加法函数。

tests.js

在tests.js添加针对add函数的测试代码：

var should = chai.should();

describe("测试add函数", function()
{
    it("1加1等于2", function()
    {
        var sum = add(1, 2);
        should.equal(sum, 3);
    });

    it("1加2等于3", function()
    {
        var sum = add(1, 2);
        should.equal(sum, 3);
    });
});

在测试代码中，我使用了断言库Chai。

index.html

在index.html中，需要添加源代码add.js以及断言库chai.js：



  
    Mocha

运行测试

使用浏览器打开index.html，就会运行测试，并且看到运行结果：

可知，测试通过:)

mocha-phantomjs：使用命令行测试

对于习惯在终端敲命令行的程序员来说，用浏览器打开index.html去进行测试显得非常不合时宜。

还好，有所谓的headless的浏览器PhantomJS，它没有图形界面，却可以运行前端代码，方便用来测试。

mocha-phantomjs命令

安装phantomjs和mocha-phantomjs(phantomjs模块更名为phantomjs-prebuilt)：

sudo cnpm install -g phantomjs-prebuilt mocha-phantomjs

将Mocha和PhontomJS结合起来的是mocha-phantomjs，在终端执行mocha-phantomjs命令，它会在PhantomJS中执行Mocha测试代码，并将结果展示在终端，非常方便：

mocha-phantomjs --path /usr/local/bin/phantomjs ./test/index.html


  测试add函数
    ✓ 1加1等于2
    ✓ 1加2等于3


  2 passing (7ms)

--path选项指定了phantomjs的安装路径。这个必须指定，否则会报错"phantomjs terminated with signal SIGSEGV"。

另外，测试代码tests.js中必须有describe语句，否则使用mocha-phantomjs执行时会报错"mocha.run() was called with no tests"。

npm test命令

mocha-phantomjs的测试命令比较长，可以在package.json中配置npm的test脚本：

 "scripts": {
    "test": "mocha-phantomjs --path /usr/local/bin/phantomjs ./test/index.html"
  },

这样，执行npm test命令就可以运行测试。

GPU云服务器云服务器单元测试-mocha-jasmine mocha 浏览器webrtc测试 webrtc 浏览器测试

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95218.html

Mocha 和 Chai 入门初探

摘要：转载自楼主个人博客和入门初探在和作比较的时候两者主要的不同就是的集成度比较高内置断言库而需要搭配额外的断言库在此选择了比较流行的作为断言库风格的选择其中又有好几种断言风格我们经常见到的其实就是风格的其中我较喜欢因为它可以直接以属性的方式嵌入转载自楼主个人博客 Mocha 和 Chai 入门初探 Chai 在和 jest 作比较的时候, 两者主要的不同就是 jest 的集成度比较高内置...

caoym 2019-08-21 11:26 评论0 收藏0
前端单元测试实现教程 mocha + mochawesome + istanbul + sinon

摘要：为什么要写单元测试减少提高代码质量，保证你的代码是可测试的放心重构当你每个方法都写了单元测试的时候，你每一个改动都会影响相应的单元测试，这样你不用费尽心思的考虑哪里会有影响，特别是复杂项目或非核心功能不易被测试到，从而导致的产生。为什么要写单元测试减少bug 提高代码质量，保证你的代码是可测试的放心重构当你每个方法都写了单元测试的时候，你每一个改动都会影响相应的单元测试，这...

AaronYuan 2019-08-22 15:36 评论0 收藏0
Vue单元测试实战教程(Mocha/Karma + Vue-Test-Utils + Chai)

摘要：在前端进阶之路前端架构设计测试核心这边文章中通过分析了传统手工测试的局限性去引出了测试驱动开发的理念并介绍了一些测试工具这篇文章我将通过一个的项目去讲解如何使用且结合官方推荐的去进行单元测试的实战一安装我为本教程写一个示例库您可以直接在《前端进阶之路: 前端架构设计(3) - 测试核心》这边文章中, 通过分析了传统手工测试的局限性去引出了测试驱动开发的理念, 并介绍了一些测试工具....

RebeccaZhong 2019-08-21 18:31 评论0 收藏0
使用karma+mocha+chai+sinon+@vue/test-utils为你的组件库增加单元

摘要：但是，项目中的一些公共封装，比如公共的组件公用的功能模块等是可以使用单元测试的。因此特为组件库引入单元测试，目的在于能减少组件的，避免重复的发布不必要的包。项目github地址：https://github.com/yuanalina/installAsRequired这里必须要提前说明，前端项目的单元测试不是必须的，特别是业务型项目，增加单元测试反而会成为累赘，增加开发成本且无意义...

happen 2019-08-23 14:53 评论0 收藏0
Ajax单元测试傻瓜教程

摘要：原文出处单元测试傻瓜教程请求经常容易发生错误，客户端发送的数据出问题，服务器端返回的数据有误都会导致请求错误。设置在我们开始单元测试之前，我们需要安装几个必须的工具。我们将用它来向你们展示如何对进行单元测试。原文出处：AJAX单元测试傻瓜教程 Ajax 请求经常容易发生错误，客户端发送的数据出问题，服务器端返回的数据有误都会导致 Ajax 请求错误。你不能保证与服务器的连接总是工作...

30e8336b8229 2019-08-21 10:48 评论0 收藏0