浏览器端测试：mocha,chai,phantomjs

最新推荐文章于 2022-02-20 22:34:43 发布

Archer_An

最新推荐文章于 2022-02-20 22:34:43 发布

阅读量1.7k

点赞数

分类专栏： Web前端设计 Node.js JavaScript 文章标签：浏览器 mocha chai

本文链接：https://blog.youkuaiyun.com/haandxc/article/details/51792665

版权

JavaScript 同时被 3 个专栏收录

27 篇文章

订阅专栏

Web前端设计

24 篇文章

订阅专栏

Node.js

7 篇文章

订阅专栏

本文介绍如何使用mocha和chai对前端JavaScript代码进行单元测试。通过一个具体的fibonacci函数示例，演示了如何设置测试环境、编写测试用例及运行测试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目标：
建立一个 lesson7 项目，在其中编写代码，我们在lesson7中新建一个文件夹命名为 vendor
这次我们测试的对象是之前提到的 fibonacci 函数
此函数的定义为 int fibonacci(int n)
- 当 n === 0 时，返回 0；n === 1时，返回 1;
- n > 1 时，返回 fibonacci(n) === fibonacci(n-1) + fibonacci(n-2)，如 fibonacci(10) === 55;

知识点：
1. 学习使用测试框架 mocha 进行前端测试 : http://mochajs.org/
2. 了解全栈的断言库 chai: http://chaijs.com/

前端脚本单元测试
前面一节的内容主要是针对后端环境中 node 的一些单元测试方案，出于应用健壮性的考量，针对前端 js 脚本的单元测试也非常重要。而前后端通吃，也是 mocha 的一大特点。首先，前端脚本的单元测试主要有两个困难需要解决。
1. 运行环境应当在浏览器中，可以操纵浏览器的DOM对象，且可以随意定义执行时的 html 上下文。
2. 测试结果应当可以直接反馈给 mocha，判断测试是否通过。

首先我们应该搭建一个测试原型，用 mocha 自带的脚手架自动生成。

mocha会生成一个简单的测试原型，目录结构为：

其中 index.html 是单元测试的入口，tests.js 是测试用例文件。
我们直接在 index.html 插入上述示例的 fibonacci 函数以及断言库 chaijs。


    <!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 src='https://raw.githubusercontent.com/chaijs/chai/master/chai.js'></script>
    <script>
      var fibonacci = function (n) {
            if (n === 0) {
              return 0;
            }
            if (n === 1) {
              return 1;
            }
            return fibonacci(n-1) + fibonacci(n-2);
          };
    </script>
      </body>
    </html>

然后在tests.js中写入对应测试用例:


    var should = chai.should();
    describe('simple test', function () {
      it('should equal 0 when n === 0', function () {
    window.fibonacci(0).should.equal(0);
      });
    });