惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

量子位
博客园_首页
罗磊的独立博客
云风的 BLOG
云风的 BLOG
J
Java Code Geeks
Last Week in AI
Last Week in AI
D
DataBreaches.Net
Jina AI
Jina AI
博客园 - Franky
大猫的无限游戏
大猫的无限游戏
Apple Machine Learning Research
Apple Machine Learning Research
V
V2EX
D
Docker
MongoDB | Blog
MongoDB | Blog
B
Blog RSS Feed
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
宝玉的分享
宝玉的分享
Engineering at Meta
Engineering at Meta
The Cloudflare Blog
博客园 - 三生石上(FineUI控件)
有赞技术团队
有赞技术团队
人人都是产品经理
人人都是产品经理
H
Help Net Security
T
The Blog of Author Tim Ferriss

博客园 - 叶伟民

RAG开发大模型应用掉进过的坑(1)——从讨论国内外大模型应用发展而起 大模型时代的PDF解析工具 《.NET内存管理宝典 》(Pro .NET Memory Management) 阅读指南 - 第10章 《.NET内存管理宝典 》(Pro .NET Memory Management) 阅读指南 - 第9章 《.NET内存管理宝典 》(Pro .NET Memory Management) 阅读指南 - 第8章 《.NET内存管理宝典 》(Pro .NET Memory Management) 阅读指南 - 第7章 《.NET内存管理宝典 》(Pro .NET Memory Management) 阅读指南 - 第6章 《.NET内存管理宝典 》(Pro .NET Memory Management) 阅读指南 - 第4章 《.NET内存管理宝典 》(Pro .NET Memory Management) 阅读指南 - 第3章 如何取书名(2) - 书店研究心得 《.NET内存管理宝典 》(Pro .NET Memory Management) 阅读指南 - 第5章 《.NET内存管理宝典 》(Pro .NET Memory Management) 阅读指南 - 第2章 走正确的路 - IT业没有护城河 - 机器翻译新锐Deepl 《.NET内存管理宝典 》(Pro .NET Memory Management) 阅读指南 - 第1章 Women forum两周年有感 现代化编程模式(1)-快 转型 - 在海归群的最大收获以及写给子孙后代的。 《 .NET并发编程实战》一书中的节流为什么不翻译成限流 《.NET内存管理宝典》 售后服务系列文(2) - WinDbg命令.cmdtree
使用Jasmine和karma对传统js进行单元测试
叶伟民 · 2020-09-19 · via 博客园 - 叶伟民

2020-09-19 22:25  叶伟民  阅读(244)  评论()    收藏  举报

当你拿到十五年前的一堆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库来还原了。)