自动化测试（六）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
-
安装依赖
npm install @babel/core @babel/preset-env chai mocha webpack webpack-cli babel-loader -D -
安装karma的适配器
npm install karma-webpack karma-chrome-launcher karma-mocha karma-chai -D -
配置
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' ] }) } -
书写测试用例
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、断言 }) }) -
开始测试：
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