Mocha浏览器测试入门教程

摘要: 如何使用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浏览器测试的关键:

<!DOCTYPE html>
<html>
  <head>
    <title>Mocha</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="mocha.css" />
  </head>
  <body>
    <div id="mocha"></div>
    <script src="mocha.js"></script>
    <script>mocha.setup('bdd');</script>
    <script src="tests.js"></script>
    <script>
      mocha.run();
    </script>
  </body>
</html>

可知:

  • 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

<!DOCTYPE html>
<html>
  <head>
    <title>Mocha</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="mocha.css" />
  </head>
  <body>
    <div id="mocha"></div>
    <script src="mocha.js"></script>
    <script>mocha.setup('bdd');</script>
    <script src="https://cdn.staticfile.org/chai/4.0.0-canary.1/chai.js"></script>
    <script src="../add.js"></script>
    <script src="tests.js"></script>
    <script>
      mocha.run();
    </script>

  </body>
</html>

运行测试

使用浏览器打开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命令就可以运行测试。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏软件测试经验与教训

LR关联知识点详解

在脚本回放过程中,客户端发出请求,通过关联函数所定义的左右边界值(也就是关联规则),在服务器所响应的内容中查找,得到相应的值,以变量的形式替换录制时的静态值,从...

1283
来自专栏Python

flask celery 使用方法

由于celery4.0不支持window,如果在window上安装celery4.0将会出现下面的错误

4350
来自专栏沈唁志

Python 使用 fake-useragent 库时报错的解决方法

UserAgent 就是用户代理,又叫报头,是一串字符串,相当于浏览器的身份证号,在利用爬虫爬取网站数据时,频繁更换它可以避免触发相应的反爬机制

3872
来自专栏小程序解决方案的专栏

Wafer2 Node.js QuickStart 架构分析

Wafer2 的 Node.js QuickStart 采用了 Koa.js 框架编写,Koa 将整个请求过程看做全异步的操作,使用 Node.js 7.6 开...

6.3K6
来自专栏大内老A

WCF技术剖析(卷1)之目录

第1章  WCF简介 (WCF Overview)     1.1  SOA基本概念的和设计思想        1.2  WCF是对现有Windows平台下...

2318
来自专栏IT笔记

JAVA中CAS原理详解

在JDK 5之前Java语言是靠synchronized关键字保证同步的,这会导致有锁 锁机制存在以下问题: 在多线程竞争下,加锁、释放锁会导致比较多的上下文切...

6058
来自专栏SDNLAB

POF技术分享(二):POF交换机源码结构

一:函数调用关系图 POF交换机先会进行基本配置的初始化、交换机资源初始化等,然后开启交换机与控制器通信进程,建立连接进行通信,最后开启基于流表的数据包匹配与处...

3797
来自专栏SDNLAB

第五届SDN大赛初赛部分试题解题思路:基于ONOS的路径反转实现

作者简介:周正强,北京邮电大学未来网络实验室在读研究生,个人邮箱:857538065@qq.com

2213
来自专栏我是攻城师

理解Java并发里面的CAS概念

我们知道在Java多线程里面关于共享变量的操作,一定是要使用线程同步来保证线程安全的,一旦涉及线程同步,就需要加锁,一旦加锁就意味着某一个时候只能有一个线程在操...

1203
来自专栏PhpZendo

深入浅出 Laravel 路由执行原理

可以说几乎所有的框架都会涉及到「路由」的处理,简单一点讲就将用户请求的 url 分配到对应的处理程序。

2643

扫码关注云+社区

领取腾讯云代金券