electron的单元测试（基于mocha+chai+karma）

1. 最近有个接手在已有的（electron-vue）的项目中做单元测试，但是基于vue-electron脚手架搭建的项目的electron是2.0.4版本，而最新的electron已经升级到11版本，又很多兼容的问题，也摸索着走过很多坑。

1.1 在package.json中：

  "scripts": {"unit": "karma start test/unit/karma.conf.js"},"devDependencies": {"electron":"10.1.1","karma": "^5.2.3","karma-chai": "^0.1.0","karma-coverage": "^1.1.2","karma-electron": "^6.3.1","karma-mocha": "^2.0.1","karma-sourcemap-loader": "^0.3.7","karma-spec-reporter": "^0.0.32","karma-webpack": "^4.0.2","babel-plugin-istanbul": "^4.1.6","chai": "^4.1.2","mocha": "^8.2.1",}

1.2 .babelrc中: 不配置这个，覆盖率会显示为0

 "plugins": ["istanbul"]

1.3 test/unit/index.js:

import Vue from 'vue'
Vue.config.devtools = false
Vue.config.productionTip = false// require all test files (files that ends with .spec.js)
const testsContext = require.context('./specs', true, /\.spec$/)
testsContext.keys().forEach(testsContext)// require all src files except main.js for coverage.
// you can also change this to match only the subset of files that
// you want coverage for.
// 匹配全部 require.context('../../src/renderer', true, /\.\//)
const srcContext = require.context('../../src/renderer', true, /^\.\/(?!main(\.js)?$)/)
srcContext.keys().forEach(srcContext)
console.log("筛选后的数据",srcContext.keys())

1.4 test/unit/karma.conf.js: // 配置全局变量，传递全局变量到单元测试环境中，有些版本需要这样配置才能在单元测试中获取到获取到process，'process.env': {'NODE_ENV':'"testing"'}

'use strict'const path = require('path')
const merge = require('webpack-merge')
const webpack = require('webpack')const baseConfig = require('../../.electron-vue/webpack.renderer.config')
const projectRoot = path.resolve(__dirname, '../../src/renderer')// Set BABEL_ENV to use proper preset config
process.env.BABEL_ENV = 'test'let webpackConfig = merge(baseConfig, {devtool: '#inline-source-map',plugins: [   //这里配置全局变量，或者.d.ts声明的全局接口 new webpack.DefinePlugin({  // 有些版本需要这样配置 才能获取到process，'process.env': {'NODE_ENV':'"testing"'}'process.env.NODE_ENV': '"testing"'})]
})// don't treat dependencies as externals
delete webpackConfig.entry
delete webpackConfig.externals
delete webpackConfig.output.libraryTarget// apply vue option to apply isparta-loader on js
webpackConfig.module.rules.find(rule => rule.use.loader === 'vue-loader').use.options.loaders.js = 'babel-loader'module.exports = config => {config.set({browsers: ['visibleElectron'],client: {useIframe: false},coverageReporter: {dir: './coverage',reporters: [{ type: 'lcov', subdir: '.' },{ type: 'text-summary' }]},customLaunchers: {'visibleElectron': {base: 'Electron',flags: ['--show']}},frameworks: ['mocha', 'chai'],files: ['./index.js'],preprocessors: {'./index.js': ['webpack', 'sourcemap']},reporters: ['spec', 'coverage'],singleRun: true,webpack: webpackConfig,webpackMiddleware: {noInfo: true}})
}

1.5 因为electron-vue搭建的electron版本很低，所有需要在node_modules/karma-electron/lib/electron-launcher.js中new BrowserWindow中配置：才能在单元测试中调用electron中的node的api和electron的remote的api。

webPreferences:{nodeIntegration:true,enableRemoteModule:true
}

electron的单元测试（基于mocha+chai+karma）相关推荐

大前端的自动化工厂（5）—— 基于Karma+Mocha+Chai的单元测试和接口测试
一. 前端自动化测试大多数前端开发者对测试相关的知识是比较缺乏的,一来是开发节奏很快,来不及写,另一方面团队里也配备了"人肉测试机",完全没必要自己来.但随着项目体量的增大,许多 ...
使用karma+mocha+chai为vue组件库做单元测试
前言单元测试,这一环节对我们的应用的重要性不言而喻,它能很大程度确保我们项目运行的健壮性.因此,前一段时间,笔者公司要求现有的vue搭建的npm组件库做单元测试.之前,笔者对单元测试做过了解,一直想 ...
前端单元测试-karma+mocha+chai
一.概念普及 1.单元测试运行环境: 运行环境是集成一系列功能的工具,我们可以通过它来选择"测试框架".自动打开浏览器.查看测试结果等功能.我们可以把它近似的理解为vue的vue- ...
前端新手使用karma+mocha+chai+sinon 进行angularjs 单元测试
这里只谈如何搭建环境. 选型:在jasmine 和 mocha+chai中间比较了一下,根据项目需要选择了后者. 安装依赖包和环境直接执行下列命令安装或在项目目录下运行npm install(pa ...
karma+phantomjs+mocha+chai使用心得
前言作为一名被逼着开发转测试,后台转前台的苦逼来说,分享一下前端js单元测试的一些使用心得.按照网上的教程来走虽然大部分能够运行,但是部分教程不适用于实际测试环境,所以我来发布一个简单的教程,方便后 ...
vue-cli自动化测试karma + mocha + chai
最近再为团队团队选择可行的测试方案.前端目前是vue-cli技术栈.试着在vue项目添加测试.把测试完整的方案记录下来. vue官网给的例子用的是karma + mocha + chai. karma ...
前端Mocha+Chai单元测试
一. 单元测试单元测试分为两种: TDD:Test-Driven Development,测试驱动开发,注重输出结果. BDD:Behavior Driven Development,行为驱动开发, ...
[Js_Testing]3分钟学会Mocha+Chai单元测试
目录什么是单元测试什么是mocha 常见断言库什么是chai 介绍用法: 使用安装环境测试框架写法 mocha的使用本节代码参考目录什么是单元测试单元测试是用来对一个模块.一个函数 ...
Mocha+should+Karma自动化测试教程
Mocha+should+Karma自动化测试教程一.了解TDD与BDD 首先,为什么我们了解TDD与BDD的是什么意思? 在实际项目中,大部分都是采用BDD的形式进行开发,也就是行为驱动开发. T ...

electron的单元测试（基于mocha+chai+karma）

electron的单元测试（基于mocha+chai+karma）相关推荐

最新文章

热门文章