使用mocha前端单元测试

hidogs 发布于2019-08-22 10:44 / 739人阅读

摘要：需求因为之前的项目没有涉及到测试这一块没有完整的测试体系。最近看了阮一峰老师的测试框架实例教程来总结一下。小试牛刀具体的教程在阮一峰老师的博客上有介绍，这里就不再赘述。

Mocha

需求

因为之前的项目没有涉及到测试这一块,没有完整的测试体系。最近看了阮一峰老师的测试框架 Mocha 实例教程
来总结一下。

小试牛刀

具体的教程在阮一峰老师的博客上有介绍，这里就不再赘述。
以自己的github上的小工具klocation.js做了个示例：

/**
 * Created by caozheng on 2016/11/28.
 */
require("./../KLoction");
var expect = require("chai").expect;


(function (win) {
    var testUrl = "https://github.com/karzanOnline?a=1";
    describe("constructor", function () {
        var testResult =  KLocation(testUrl);

        describe("#output", function () {
            it("return value is an object", function () {
                expect(testResult).to.be.an("object")
            });
            it("property url is string", function () {
                expect(testResult.url).to.be.a("string")
            });
            it("property port is number", function () {
                expect(testResult.port).to.be.a("number")
            });
            it("property host is string", function () {
                expect(testResult.host).to.be.a("string")
            });
            it("property protocol is string", function () {
                expect(testResult.protocol).to.be.a("string")
            });
            it("property pathname is string", function () {
                expect(testResult.pathname).to.be.a("string")
            });
        });

        describe("#method", function () {
            it("getParam", function () {
                expect(testResult.getParam()).to.be.deep.equal({a : "1"})
            });
            it("getProtocol", function () {
                expect(testResult.getProtocol()).to.be.equal("https:")
            });
            it("getHost", function () {
                expect(testResult.getHost()).to.be.equal("github.com")
            });
            it("getPort", function () {
                expect(testResult.getPort()).to.be.empty;
            });
            it("getPathname", function () {
                expect(testResult.getPathname()).to.be.equal("/karzanOnline")
            })

        })

    })

})(this);

在github上还要去https://travis-ci.org注册一下,然后通过配置.travis.yml文件(确定使用的语言和node的版本)，如果测试通过就会生成一个图标

然后把url放到README.md就可以了。

expect(经常用到的方法)

// 相等或不相等
expect(4 + 5).to.be.equal(9);
expect(4 + 5).to.be.not.equal(10);
expect(foo).to.be.deep.equal({ bar: "baz" });

// 布尔值为true
expect("everthing").to.be.ok;
expect(false).to.not.be.ok;

// typeof
expect("test").to.be.a("string");
expect({ foo: "bar" }).to.be.an("object");
expect(foo).to.be.an.instanceof(Foo);

// include
expect([1,2,3]).to.include(2);
expect("foobar").to.contain("foo");
expect({ foo: "bar", hello: "universe" }).to.include.keys("foo");

// empty
expect([]).to.be.empty;
expect("").to.be.empty;
expect({}).to.be.empty;

// match
expect("foobar").to.match(/^foo/);

mochawesome

这里阮一峰老师给的code是(三个步骤改进一下)

$ npm install --save-dev mochawesome
$ ../node_modules/.bin/mocha --reporter mochawesome

首先安装mochawesome必须！但是第二步可以通过package.json来设置，由于node_modules/.bin/目录会在运行时加入系统的PATH变量，因此在运行npm时，就可以不带路径，直接通过命令来调用这些脚本。

根目录创建test文件(mocha.opts配置项加一下)

放入测试的脚本

package.json配置scripts

"scripts": {
    "test": "mocha --reporter mochawesome"
  },

将会在同级目录生成mochawesome-reports，访问html即可。

异步测试

var fetch = require ("node-fetch");
var expect = require("chai").expect;

it("异步请求应该返回一个对象", function (done) {
    return fetch("https://api.github.com")
        .then(function (res) {
          return res.json()
        }).then(function (json) {
          expect(json).to.be.an("object");
          done();
        })
    })

测试用例管理

it.only :如果测试代码中有only，那么只有带有only方法的测试用例会运行。

it.skip :与only相反

idc机房托管私有云单元测试-mocha-jasmine 单元-mocha-jasmine 单元测试单元测试规范

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

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

前端单元测试实现教程 mocha + mochawesome + istanbul + sinon

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

AaronYuan 2019-08-22 15:36 评论0 收藏0
前端单元测试探索

摘要：单元测试的首要目的不是为了能够编写出大覆盖率的全部通过的测试代码，而是需要从使用者调用者的角度出发，尝试函数逻辑的各种可能性，进而辅助性增强代码质量测试是手段而不是目的。本文已发布在稀土掘金转载请注明原文链接：https://github.com/ecmadao/Co... 虽然很多公司有自己的测试部门，而且前端开发大多不涉及测试环节，但鉴于目前前端领域的快速发展，其涉及面越来...

陈江龙 2019-08-20 11:05 评论0 收藏0
测试你的前端代码 - part2（单元测试）

摘要：单元测试上一节有讨论过，单元测试就是以代码单元为单位进行测试，代码单元可以是一个函数，一个模块，或者一个类。单元测试是最容易理解也最容易实现的测试方式。在写单元测试的时候，尽量将你的单元测试独立出来，不要几个单元互相引用。 showImg(https://segmentfault.com/img/remote/1460000008823416?w=997&h=350); 本文作者：G...

daydream 2019-05-29 16:59 评论0 收藏0
测试你的前端代码 - part2（单元测试）

摘要：单元测试上一节有讨论过，单元测试就是以代码单元为单位进行测试，代码单元可以是一个函数，一个模块，或者一个类。单元测试是最容易理解也最容易实现的测试方式。在写单元测试的时候，尽量将你的单元测试独立出来，不要几个单元互相引用。 showImg(https://segmentfault.com/img/remote/1460000008823416?w=997&h=350); 本文作者：G...

shadajin 2019-08-20 15:21 评论0 收藏0
前端临床手札——单元测试

摘要：感觉不能这样下去就学写一下单元测试，等他更新代码我都跑一遍确认一下，这样工作安心多了。具体执行的测试用例实现代码。测试工具断言库测试驱动开发及测试框架入门学习最近博主工作是和另一枚后端合作，但是经常发现他写的接口出错，苦逼连连。感觉不能这样下去就学写一下单元测试，等他更新代码我都跑一遍确认一下，这样工作安心多了。经过博主一番查找，貌似被推荐比较多的有mocha和chai，下面记录简...

kid143 2019-08-19 18:17 评论0 收藏0
前端临床手札——单元测试

摘要：感觉不能这样下去就学写一下单元测试，等他更新代码我都跑一遍确认一下，这样工作安心多了。具体执行的测试用例实现代码。测试工具断言库测试驱动开发及测试框架入门学习最近博主工作是和另一枚后端合作，但是经常发现他写的接口出错，苦逼连连。感觉不能这样下去就学写一下单元测试，等他更新代码我都跑一遍确认一下，这样工作安心多了。经过博主一番查找，貌似被推荐比较多的有mocha和chai，下面记录简...

godlong_X 2019-05-29 16:57 评论0 收藏0