自动化测试（六）02-js测试执行过程管理工具Karma——karma示例之Karma支持babel、es6、mocha、webpack

最新推荐文章于 2024-05-16 10:06:04 发布
最新推荐文章于 2024-05-16 10:06:04 发布
阅读量475 收藏 1
点赞数
分类专栏： 架构和运维 文章标签： javascript 自动化 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44867717/article/details/123287235
版权
本文介绍了如何使用Karma测试框架与Babel、ES6、Mocha和Webpack配合，实现JavaScript项目的模块转换和测试执行，包括配置webpack预处理器和解决CommonJS问题。通过实例展示了从安装依赖、配置karma.config.js到实际测试的过程。
摘要由CSDN通过智能技术生成

自动化测试（六）02-js测试执行过程管理工具Karma——karma示例之Karma支持babel、es6、mocha、webpack

karma示例

目标 ：

  • babel支持，ES6语法支持
  • mocha与chai支持
  • karma与chrome、webpack对接

karma示例目录

在这里插入图片描述

说明：

Karma对babel支持的，一个可选项：karma-babel-preprocessor，但是：

babel and karma-babel-preprocessor only convert ES6 modules to CommonJS/AMD/SystemJS/UMD**. If you choose CommonJS, you still need to resolve and concatenate CommonJS modules on your own**. We recommend karma-browserify + babelify or webpack + babel-loader in such cases.

所以，我们选择了webpack

  1. 安装依赖

    npm install @babel/core @babel/preset-env chai mocha webpack webpack-cli babel-loader -D

  2. 安装karma的适配器

    npm install karma-webpack karma-chrome-launcher karma-mocha karma-chai -D

  3. 配置karma.config.js

    // Karma configuration
// Generated on Thu Jul 11 2019 23:23:44 GMT+0800 (GMT+08:00)

module.exports = function (config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['mocha'],


    // list of files / patterns to load in the browser
    files: [
      'src/**/*.js',
      'test/**/*.js'
    ],

 
    // ....
    

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      'src/**/*.js': ['webpack'],  //多层级文件夹  用*
      'test/**/*.js': ['webpack']
    },

    webpack: {
      mode: "none",
      node: {
        fs: 'empty'
      },
      module: {
        rules: [
          { test: /\.js?$/, loader: "babel-loader", options: { presets: ["@babel/env"] }, }
        ]
      }
    },
 
    // ....
    
    plugins: [
      'karma-mocha',
      'karma-chai',
      'karma-chrome-launcher',
      'karma-webpack'
    ]
  })
}

  4. 书写测试用例test.js：

    import { describe } from "mocha";  //1.0、导入
import { expect } from 'chai'

describe('first test', () => {  //2.0、描述
  it('hello mocha and karma', () => {
    console.log('hello mocha')
    expect(true).to.be.equal(true)  //3.0、断言
  })
})

  5. 开始测试：

    npx karma start

    添加到package.json

    "scripts": {
  "karma": "karma start"
},

    然后使用，npm run karma

    ➜ npx karma start
ℹ ｢wdm｣: Hash: 9d2c943b68425fd58dd0
Version: webpack 4.35.3
Time: 53ms
Built at: 2019-07-12 5:07:49 PM
ℹ ｢wdm｣: Compiled successfully.
ℹ ｢wdm｣: Compiling...
⚠ ｢wdm｣: Hash: cca8316f4bd5855fc4de
Version: webpack 4.35.3
Time: 2414ms
Built at: 2019-07-12 5:07:52 PM
       Asset      Size  Chunks             Chunk Names
src/index.js  3.62 KiB       0  [emitted]  src/index
test/test.js  1010 KiB       1  [emitted]  test/test
Entrypoint src/index = src/index.js
Entrypoint test/test = test/test.js
  [0] ./src/index.js 27 bytes {0} [built]
  [1] ./test/test.js 223 bytes {1} [built]
  [2] ./node_modules/mocha/browser-entry.js 4.19 KiB {1} [built]
  [3] ./node_modules/process/browser.js 4.96 KiB {1} [built]
  [4] (webpack)/buildin/global.js 878 bytes {1} [built]
  [5] ./node_modules/browser-stdout/index.js 662 bytes {1} [built]
  [6] ./node_modules/stream-browserify/index.js 3.53 KiB {1} [built]
 [36] ./node_modules/util/util.js 19 KiB {1} [built]
 [38] ./node_modules/mocha/lib/mocha.js 21.8 KiB {1} [built]
 [39] (webpack)/buildin/module.js 552 bytes {1} [built]
 [40] ./node_modules/escape-string-regexp/index.js 230 bytes {1} [built]
 [41] path (ignored) 15 bytes {1} [built]
 [42] ./node_modules/mocha/lib/reporters/index.js 945 bytes {1} [built]
[105] ./node_modules/chai/index.js 39 bytes {1} [built]
[106] ./node_modules/chai/lib/chai.js 1.22 KiB {1} [built]
    + 128 hidden modules

WARNING in ./node_modules/mocha/lib/mocha.js 217:20-37
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/mocha/browser-entry.js
 @ ./test/test.js

WARNING in ./node_modules/mocha/lib/mocha.js 222:24-70
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/mocha/browser-entry.js
 @ ./test/test.js

WARNING in ./node_modules/mocha/lib/mocha.js 266:24-35
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/mocha/browser-entry.js
 @ ./test/test.js

WARNING in ./node_modules/mocha/lib/mocha.js 313:35-48
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/mocha/browser-entry.js
 @ ./test/test.js

WARNING in ./node_modules/mocha/lib/mocha.js 329:23-44
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/mocha/browser-entry.js
 @ ./test/test.js
ℹ ｢wdm｣: Compiled with warnings.
12 07 2019 17:07:52.761:WARN [karma]: No captured browser, open http://localhost:9876/
12 07 2019 17:07:52.770:INFO [karma-server]: Karma v4.1.0 server started at http://0.0.0.0:9876/
12 07 2019 17:07:52.770:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
12 07 2019 17:07:52.773:INFO [launcher]: Starting browser Chrome
12 07 2019 17:07:54.135:INFO [Chrome 75.0.3770 (Mac OS X 10.14.5)]: Connected on socket R9R31QB1GtR_kayNAAAA with id 55412577
Chrome 75.0.3770 (Mac OS X 10.14.5) LOG: 'hello karma'

LOG: 'hello mocha'
Chrome 75.0.3770 (Mac OS X 10.14.5): Executed 1 of 1 SUCCESS (0 secs / 0.001 secs
~/Downloads/karma-demo is 📦 v1.0.0 via ⬢ v10.16.0 
➜ npm run karma

> karma-demo@1.0.0 karma /Users/itheima/Downloads/karma-demo
> karma start

ℹ ｢wdm｣: Hash: 9d2c943b68425fd58dd0
Version: webpack 4.35.3
Time: 48ms
Built at: 2019-07-12 5:24:02 PM
ℹ ｢wdm｣: Compiled successfully.
ℹ ｢wdm｣: Compiling...
⚠ ｢wdm｣: Hash: cca8316f4bd5855fc4de
Version: webpack 4.35.3
Time: 2307ms
Built at: 2019-07-12 5:24:04 PM
       Asset      Size  Chunks             Chunk Names
src/index.js  3.62 KiB       0  [emitted]  src/index
test/test.js  1010 KiB       1  [emitted]  test/test
Entrypoint src/index = src/index.js
Entrypoint test/test = test/test.js
  [0] ./src/index.js 27 bytes {0} [built]
  [1] ./test/test.js 223 bytes {1} [built]
  [2] ./node_modules/mocha/browser-entry.js 4.19 KiB {1} [built]
  [3] ./node_modules/process/browser.js 4.96 KiB {1} [built]
  [4] (webpack)/buildin/global.js 878 bytes {1} [built]
  [5] ./node_modules/browser-stdout/index.js 662 bytes {1} [built]
  [6] ./node_modules/stream-browserify/index.js 3.53 KiB {1} [built]
 [36] ./node_modules/util/util.js 19 KiB {1} [built]
 [38] ./node_modules/mocha/lib/mocha.js 21.8 KiB {1} [built]
 [39] (webpack)/buildin/module.js 552 bytes {1} [built]
 [40] ./node_modules/escape-string-regexp/index.js 230 bytes {1} [built]
 [41] path (ignored) 15 bytes {1} [built]
 [42] ./node_modules/mocha/lib/reporters/index.js 945 bytes {1} [built]
[105] ./node_modules/chai/index.js 39 bytes {1} [built]
[106] ./node_modules/chai/lib/chai.js 1.22 KiB {1} [built]
    + 128 hidden modules

WARNING in ./node_modules/mocha/lib/mocha.js 217:20-37
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/mocha/browser-entry.js
 @ ./test/test.js

WARNING in ./node_modules/mocha/lib/mocha.js 222:24-70
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/mocha/browser-entry.js
 @ ./test/test.js

WARNING in ./node_modules/mocha/lib/mocha.js 266:24-35
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/mocha/browser-entry.js
 @ ./test/test.js

WARNING in ./node_modules/mocha/lib/mocha.js 313:35-48
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/mocha/browser-entry.js
 @ ./test/test.js

WARNING in ./node_modules/mocha/lib/mocha.js 329:23-44
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/mocha/browser-entry.js
 @ ./test/test.js
ℹ ｢wdm｣: Compiled with warnings.
12 07 2019 17:24:04.905:WARN [karma]: No captured browser, open http://localhost:9876/
12 07 2019 17:24:04.914:INFO [karma-server]: Karma v4.1.0 server started at http://0.0.0.0:9876/
12 07 2019 17:24:04.914:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
12 07 2019 17:24:04.922:INFO [launcher]: Starting browser Chrome
12 07 2019 17:24:06.289:INFO [Chrome 75.0.3770 (Mac OS X 10.14.5)]: Connected on socket EbCCSbQRPbxHbq3OAAAA with id 92342032
Chrome 75.0.3770 (Mac OS X 10.14.5) LOG: 'hello karma'

LOG: 'hello mocha'
Chrome 75.0.3770 (Mac OS X 10.14.5): Executed 1 of 1 SUCCESS (0 secs / 0.001 secs
Chrome 75.0.3770 (Mac OS X 10.14.5): Executed 1 of 1 SUCCESS (0.006 secs / 0.001 
secs)
TOTAL: 1 SUCCESS
viceen
关注
专栏目录
AngularJS单元测试——karma+mocha配置及实例
justforuse的博客
12-21 2951
参考链接：http://www.tuicool.com/articles/yuMvQz （注：有所修改）什么是Karma？mocha是一个js的测试框架，之前写过的一篇博客介绍了如何用node.js的环境来运行测试。Karma是一个驱动测试的Runner。也就是说，karma为测试框架准备运行环境，可以让这些测试在真正的浏览器里运行。而且，karma运行测试的过程是自动化的。自动化并非理所当然的事
搭建一个由 karma + mocha + chai + Istanbul + es6 + webpack 组成的基础测试工具
Jiuto_crx的博客
12-18 520
Karma+Mocha 目的 搭建一个由 karma + mocha + chai + Istanbul + es6 + webpack 组成的基础测试工具 工具的简单介绍 测试框架 Mocha mocha是JavaScript的一种单元测试框架，既可以在浏览器环境下运行，也可以在Node.js环境下运行。 使用mocha，我们就只需要专注于编写单元测试...
自动化测试（六）01-js测试执行过程管理工具Karma——Karma简介和工作原理 & Karma的安装和配置
weixin_44867717的博客
03-04 1675
自动化测试（六）01-js测试执行过程管理工具Karma——Karma简介和工作原理 & Karma的安装和配置 测试环境&帮手Karma Karma 是一个基于 Node.js 的 JavaScript 测试执行过程管理工具（Test Runner）。该工具可用于测试所有主流 Web 浏览器，也可以集成到 CI（Continuous integration）工具，还可以和其他代码编辑器一起使用。 Karma 会监控配置文件中所指定的每一个文件，每当文件发生改变，它都会向测试服务器发送信号，
webpack4.0各个击破（9）—— karma篇
weixin_34248118的博客
08-31 111
Webpack4.0中级教程 webpack作为前端最火的构建工具，是前端自动化工具链最重要的部分，使用门槛较高。本系列是笔者自己的学习记录，比较基础，希望通过问题 + 解决方式的模式，以前端构建中遇到的具体需求为出发点，学习webpack工具中相应的处理办法。（本篇中的参数配置及使用方式均基于webpack4.0版本） 一. webpack与自动化测试 webpack对应的关键词是模块...
JS测试工具karma及应用
anneCoder的博客
06-29 2299
测试工具 karma：测试结果即时显示。 测试框架 jasmine mocha qunit nodeunit nunit
JS测试框架Karma安装使用
smallpig的专栏
07-30 321
1.安装NodeJS 可以在http://nodejs.org/download/ 下载，我下载的是windows版本。   2.安装karma   新建一个目录如：E:\JavaScript\karma   E:\JavaScript\karma>npm install karma --save-dev   E:\JavaScript\karma>npm install...
cookiecutter-webpack：用于webpack 2，babel，react + redux + hmr和karma的样板。 可以插入到现有的django项目中
01-31
用于通过来设置配置的，用于es6模块的 ，用于查看和状态的 + ，用于测试的++。 入门 将cookiecutter下载到全局python路径 $ pip install cookiecutter 在您的项目目录中运行 $ cookiecutter ...
hey-react:完整的React.js入门工具包，具有Flux实现（Alt），具有覆盖率统计数据的自动化测试，Babel ES6 +支持，热重载，css预处理器，Bower支持，eslint等。 包括示例和Nyan Cat！
05-02
使用Mocha，Jasmine和Karma进行自动化测试 伊斯坦布尔的覆盖范围统计 Babel支持ES6 + 使用webpack-dev-server热加载 Sass ， Scss ，较少支持 Bower组件支持 与ESLint掉毛 轻松发布到Github Pages 轻松为不同的...
electronic-vue：具有vue-cli脚手架，常见Vue插件，electron-packagerelectron-builder，unite2e测试，vue-devtools和Webpack的Electron＆Vue.js快速入门样板
02-02
用vue构建电子应用程序的样板（听起来差不多）。 总览 该项目的目的是消除使用vue手动设置电子应用的需求。 电子VUE需要的优势vue-... 单元测试（使用Karma + Mocha）* 端到端测试（使用Spectron + Mocha）* *可在v
搭建karma+mocha+chai+webpack的支持es6的单元测试
踩坑小王子
08-16 2195
问题背景 首先，在搭建之前要知道在什么情况下需要karma+mocha+chai+webpack的单元测试呢？ 首先你写的项目是一个前端项目，是运行在浏览器中的，写好的代码包含了es6的语法，则需要搭建这样一个单元测试环境。 mocha是真正的测试框架，chai是断言库，而karma是一个调用浏览器执行测试代码的集合工具 需要的依赖有 karma karma-chai ka...
karma-qunit:Karma插件。 QUnit测试框架适配器
05-23
业力单位 测试框架的适配器。 安装 最简单的方法是通过运行将karma-qunit保留在package.json作为devDependency npm install karma-qunit --save-dev 配置 在您的karma.conf.js文件的frameworks数组中添加qunit 。 然后，在plugins数组中，添加karma-qunit 。 以下代码显示了默认配置： // karma.conf.js module . exports = function ( config ) { config . set ( { frameworks : [ 'qunit' ] , plugins : [ 'karma-qunit' ] , files : [ '*.js' ] } ) } 您还可以这样传递QUnit.co
karma-babel-preprocessor:Babel的Karma插件
05-02
业力-巴别尔预处理器 使用即时编译ES6的预处理器。 babel和karma-babel-preprocessor仅将ES6模块转换为CommonJS / AMD / SystemJS / UMD。 如果选择CommonJS，则仍然需要自行解析和连接CommonJS模块。 在这种情况下，我们建议使用 + 或 + 。 安装 使用Babel 7.x： npm install karma-babel-preprocessor @babel/core @babel/preset-env --save-dev 使用Babel 6.x： npm install karma-babel-preprocessor@7 babel-core babel-preset-env --save-dev 从Babel 6.0开始，。 是最常见的一种。 配置 有关更多详细信息，请参见。 给定的opti
npm karma 离线安装包 nodejs 5.5
03-26
npm karma package，用于网络限制的用户
使用Karma运行JavaScript测试
alvin的博客
10-23 436
http://icodeit.org/2013/10/using-karma-as-the-javascript-test-runner/ https://www.ibm.com/developerworks/cn/web/wa-lo-use-karma-jasmine-build-test-environment/index.html
karma测试html,测试JavaScript：Karma
weixin_28292761的博客
07-02 430
Karma此功能仅在Ultimate版本中受支持。Karma是一种用于测试客户端JavaScript的工具。Karma针对在真实浏览器中运行的应用程序执行测试，以确保测试结果的正确性和可信度。IntelliJ IDEA与Karma集成，因此您可以从IDE内部运行，调试和监控测试的覆盖范围。您可以在树视图中查看测试结果，并从那里轻松导航到测试源。测试状态显示在编辑器的测试旁边，可以选择快速运行或调试...
webpack4: Karma + mocha + node assert
weixin_30411239的博客
05-15 205
1. 前端自动化测试如果你觉得单元测试没有什么了不起的，只能说明你的项目做的不够大。当随着项目越来越大以及人员的变动，你很难去确保你代码的正确性。也许一个小小的改动，引发了一系列错误的输出。这种时候很难通过“肉眼”去发现问题，也不可能把全部工作丢给测试。这时候我们就需要单元测试去提前发现问题。单元测试就是去测试正确的输入是否能匹配到期望的输出。比如说我点击一个按钮，希望出现一个popup。如果出现...
karma +webpack +jasmine测试
weixin_41042671的博客
03-15 897
webpack可以模块化写前端jasmine测试node.js后端可通过 karma +webpack +jasmine测试前端测试karma将 webpack的模块开发和jasmine测试功能结合在一起。1､安装 karmakarma-webpackkarma-chrome-laucher需要具备安装好webpack,jasmine最后一个是用来自动启动浏览器2､./node_modules/....
推荐使用Karma Webpack：一体化的前端测试解决方案
最新发布
gitblog_00034的博客
05-16 336
推荐使用Karma Webpack：一体化的前端测试解决方案 karma-webpackKarma webpack Middleware项目地址:https://gitcode.com/gh_mirrors/ka/karma-webpack 1、项目介绍 Karma Webpack 是一个高效的前端测试框架整合方案，它将Karma（一款灵活的浏览器测试运行器）与Webpack（强大的模块打包工具...
npm 安装karma by 代理
icore
06-04 292
  安装karma和Phantomjs的时候总是失败，提示不能connect到server，尝试在cmd下面设置HTTP代理：   set HTTP_PROXY=http://XXXX:****@192.168.1.105:8080 set HTTPS_PROXY=http://XXXX:****@192.168.1.105:8080  提示仍然失败，分析在公司所有上网出口都需要...
Karma与Jasmine联合实现JavaScript自动化单元测试
Karma和Jasmine的组合为Node.js项目的单元测试提供了强大的支持，它们使得测试过程更加自动化和高效，有助于保证代码质量和项目的稳定性。通过学习和熟练使用这些工具，开发者可以更好地应对复杂的JavaScript项目。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值