当你拿到十五年前的一堆javascript的代码,你如何对这堆javascript代码写单元测试呢?于是就有了这篇文章。

注意:不需要装任何现代化js框架,包括angular,react,vue之类的,都不需要装!!!

  1. 先要安装nodejs

  2. 直接cmd进入js所在的目录

  3. 通过 npm 安装karma:

    npm install --save-dev karma
  4. 通过如下命令确认karma安装成功

    node ./node_modules/karma/bin/karma --version
  5. global安装karma-cli来直接执行karma命令

    npm i -g karma-cli
  6. 通过如下命令确认安装成功

    karma --version
  7. 通过如下命令安装jasmine

    npm i -D jasmine-core karma-jasmine karma-chrome-launcher
  8. 通过如下命令创建 karma.conf.js 配置文件

    karma init
  9. 配置karma.conf.js

    browsers: ['ChromeHeadless'],
    customLaunchers: {
    ChromeHeadlessCI: {
    base: 'ChromeHeadless',
    flags: ['--no-sandbox']
    }
    }
  10. 配置karma.conf.js以让karma能够找到你的测试文件:

    files: [
    '*.js',
    '*.spec.js'
    ],
    exclude: ['karma.conf.js'],
  11. 添加test_if_karma_works.js,并ctrl+v以下内容

    function add(a, b){
    return a + b;
    }
  12. 添加test_if_karma_works.spec.js,并ctrl+v以下内容

    describe('add function unit test.', function(){
    it('2 + 3 = 5', function(){
    var result = add( 2, 3 );
    expect( result ).toBe( 5 );
    }); it('2 + 3 = 6, this should faild.', function(){
    var result = add( 2, 3 );
    expect(result).toBe( 6 );
    })
    });
  13. 通过如下命令开始测试

    karma start

    或者

    node ./node_modules/karma/bin/karma start
  14. 通过如下命令安装karma代码覆盖率

    npm install --save-dev karma-coverage
  15. 修改karma.conf.js

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    /* 覆盖源文件 不包括测试库文件*/
    preprocessors: {
    'src/**/*.js': ['coverage']
    }, // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress', 'coverage'], /* 新增的配置项 */
    coverageReporter: {
    type: 'html',
    dir: 'coverage/'
    },
  16. 通过如下命令改为spec模式

    npm install karma-spec-reporter --save-dev
  17. 修改karma.conf.js

    reporters: ['spec'],
  18. git check in (不要签入coverage目录,但是要把node_modules目前签入,因为时过境迁,旧的package会被删掉,只能靠这里的git库来还原了。)

使用Jasmine和karma对传统js进行单元测试的更多相关文章

  1. Lodop获取全部JS代码,传统JS模版的生成

    Lodop模版有两种方法,一种是传统的JS语句,可以用JS方法里的eval来执行,一种是文档式模版,是特殊格式的base64码,此篇博文介绍传统JS模版的生成方法.两种模版都可以存入一下地方进行调用, ...

  2. Karma +Jasmine+ require JS进行单元测试并生成测试报告、代码覆盖率报告

    1. 关于Karma Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner). 该工具可用于测试所有主流Web浏览器,也可集成到CI(Continuou ...

  3. 使用jasmine来对js进行单元测试

    互联网的快速发展,给web开发人员带来了前所未有的挑战.对于前端开发,前端开发er所需要编写的js早已不是那些寥寥几行的视觉效果代码.代码量的大增,多人协同,人员素质悬殊不齐,这都需要一个标准,来对代 ...

  4. 传统js和jsx与ts和tsx的区别

    一.从定义文件格式方面说 1.传统的开发模式可以定义js文件或者jsx文件2.利用ts开发定义的文件格式tsx二.定义state的状态来说 1.传统的方式直接在构造函数中使用 constructor( ...

  5. 使用Karma、Mocha实现vue单元测试

    Karma Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner).该工具在Vue中的主要作用是将项目运行在各种主流Web浏览器进行测试.换句话说,它是 ...

  6. Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试

    在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...

  7. Node.js的单元测试框架初体验

    Mocha是一个功能丰富的JavaScript测试框架,运行在node.js平台和浏览器端,使异步测试变得简单和有趣.Mocha测试是串行的,允许灵活和准确的报告,同时将未捕获的异常映射到相应的测试用 ...

  8. 一步步构建自己的AngularJS(1)——项目初始化

    Angular1距离2009年发布已经好多年了,Angular2也已经出了Beta版,估计今年就能正式发布.大多数人对于Angular1.X的认识仅限于能够在项目中使用,对于其中的深层原理知道的并不多 ...

  9. JS相关环境搭建:Nodejs、karma测试框架、jsDuck、Express

    第一章:压缩js(nodejs,uglify) 第一步:安装nodejs环境 直接下载http://www.nodejs.org/download/ 下载完成后直接下一步下一步即可,完了我们就具有no ...

随机推荐

  1. python字典的增删改查

    字典dict 知识点: {}括起来,以键值对形式存储的容器性数据类型: 键-必须是不可变数据类型,且是唯一的: -值可以是任意数据类型.对象. 优点:关联性强,查询速度快. 缺点:以空间换时间. 字典 ...

  2. PythonCrashCourse 第六章习题

    使用一个字典来存储一个熟人的信息,包括名.姓.年龄和居住的城市.该字典应包含键first_name .last_name .age 和city .将存储在该字典中 的每项信息都打印出来 person ...

  3. bluetoothctl命令提示No default controller available

    在学习bluetoothctl命令时,执行bluetoothctl,然后执行show,提示No default controller available. 1. 执行hciconfig,发现有hci0 ...

  4. 构造 IPv6 报文

    #!/usr/bin/python from scapy.all import * a=IPv6(nh=58, src='fe80::214:f2ff:fe07:af0', dst='ff02::1' ...

  5. Linux调用Kaggle API下载数据

    1. 登录Kaggle账户,点击My Account 2. Create New API Token得到kaggle.json 3. pip install kaggle 4. 执行kaggle会报错 ...

  6. 高并发&性能优化(二)------系统监控工具使用

    上一篇主要从总体介绍了高并发&性能优化的相关思路和方法,本篇主要介绍系统监控工具. [CPU查看工具] ------top命令(性能) 进入top命令后,按1即可看到每核CPU的运行指标与详细 ...

  7. Python输入input、输出print

    1.输入input input是用于输入数据给变量.通过键盘输入的是字符串,如果需要其他格式,需要做转换.比如int.float类型数据,int() 如下是一个例子: 如果a不进行int转换,那么输入 ...

  8. virtualenv最佳实战

    一 系统环境 windows 10 64-bit 安装python 2.7.18 和python 3.8两个版本 二 安装 默认会把virtualenv安装到系统默认python版本中 pip ins ...

  9. pymssql 介绍

    pymssql包是Python语言用于连接SQL Server数据库的驱动程序(或者称作DB API),它是最终和数据库进行交互的工具.SQLAlchemy包就是利用pymssql包实现和SQL Se ...

  10. idea vue文件设置tab为四个空格

    1.找到vue项目中有个叫.editorconfig的文件,打开可以发现有以下配置项:  2.ctrl+alt+i看看效果(单文件)  3.IDEA中对整个项目进行代码格式化 在项目的左侧树结构中,右 ...