关键词:
说明
玩转webpack学习笔记
介绍
编写单元测试用例
- 技术选型:
Mocha + Chai
组合 - 测试代码:
describe
:描述测试文件,it
:一个 it 代表一个测试用例,except
:用于断言 - 测试命令:
mocha add.test.js
测试用例的例子:add.test.js
const expect = require('chai').expect;
const add = require('../src/add');
describe('use expect: src/add.js', () =>
it('add(1, 2) === 3', () =>
expect(add(1, 2).to.equal(3));
);
);
单元测试接入
1. 安装 mocha + chai
npm i mocha chai -D
2. 新建 test 目录,并增加 xxx.test.js
测试文件
3. 在 package.json
中的 scripts 字段增加 test 命令
"scripts":
"test": "node_modules/mocha/bin/_mocha”
,
4. 执行测试命令
npm run test
可以自己打开https://mochajs.org/查看更多
单元测试实战
- 新建文件夹跟文件,在 test 文件夹里添加 unit 文件夹,跟文件
webpack-base-test.js
,该文件用来测试lib/webpack.base.js
的。
// 引入断言库
const assert = require('assert');
describe('webpack.base.js test case', () =>
const baseConfig = require('../../lib/webpack.base.js');
console.log(baseConfig);
// 看看entry是否正常
it('entry', () =>
);
);
- test 里添加入口文件
index.js
// 需要跑到smoke里template的目录
const path = require('path');
// 更改 Node.js 进程的当前工作目录 __dirname 为 test
process.chdir(path.join(__dirname, 'smoke/template'));
describe('builder-webpack test case', () =>
require('./unit/webpack-base-test');
);
- 增加测试脚本
"test": "./node_modules/.bin/_mocha",
- 运行脚本
npm run test
- 在断言库的基础上添加 entry 判断测试,看看是否合理
// 引入断言库
const assert = require('assert');
describe('webpack.base.js test case', () =>
const baseConfig = require('../../lib/webpack.base.js');
console.log(baseConfig);
// 看看entry是否正常
it('entry', () =>
assert.equal(baseConfig.entry.index, 'D:/MyGithub/webpack-demo/my-project/builder-webpack/test/smoke/template/src/index/index.js');
assert.equal(baseConfig.entry.search, 'D:/MyGithub/webpack-demo/my-project/builder-webpack/test/smoke/template/src/search/index.js');
);
);
执行 npm run test
:
如果不正常就会报错,比如我们改动一下: index1.js
assert.equal(baseConfig.entry.index, 'D:/MyGithub/webpack-demo/my-project/builder-webpack/test/smoke/template/src/index/index1.js');
测试覆盖率实战
JavaScript test coverage made simple. https://istanbul.js.org/
这里使用的是 istanbul。
- 如果你是按照老师的课程去的话
npm i istanbul -D
,在脚本里添加 test2:
单元测试:"test": "./node_modules/.bin/_mocha",
测试覆盖率:"test2": "istanbul cover ./node_modules/.bin/_mocha",
- 当执行
npm run test2
会报错:
关于这个报错,其实可以参考一下:SyntaxError: missing ) after argument list
- windows下路径要换个写法:
单元测试时用:"test": "./node_modules/.bin/_mocha",
测试覆盖率时用:"test2": "istanbul cover ./node_modules/mocha/bin/_mocha",
这个就不多说了。
- 接下来看 istanbul 官网推荐的写法 https://istanbul.js.org/
The nyc command-line-client for Istanbul works well with most JavaScript testing frameworks: tap, mocha, AVA, etc.
用于 istanbul 的 nyc 命令行客户端适用于大多数 JavaScript 测试框架:tap、mocha、AVA 等。
- 所以我们先安装:
npm install --save-dev nyc
- 然后添加脚本:
"nyc": "nyc ./node_modules/.bin/_mocha",
- 接下来执行脚本
npm run nyc
更多也可以参考Using Istanbul With Mocha
下一节聊聊:持续集成和Travis CI
(完)
Webpack 和 Angular 的单元测试覆盖映射损坏了吗?
】Webpack和Angular的单元测试覆盖映射损坏了吗?【英文标题】:UnittestcoveragemappingwithWebpackandAngularbroken?【发布时间】:2019-02-2204:20:47【问题描述】:花了几个小时解决了这个问题-也许有人知道为什么我的覆盖率报告没有正确映射... 查看详情
前端单元测试笔记——覆盖率篇
...覆盖率,开始的时候,看断言库,看mocha,但实际操刀写单元测试,还是没啥概念,就算是看了elementui组件库的那些单元测试用例,实际搬到自己组件上的时候,还是感觉无从下手,只有个模糊的概念:组件的单元测试,那就分... 查看详情
使用 karma 和 webpack 进行单元测试:_karma_webpack_ - 没有这样的文件或目录
】使用karma和webpack进行单元测试:_karma_webpack_-没有这样的文件或目录【英文标题】:UnitTestwithkarmaandwebpack:_karma_webpack_-nosuchfileordirectory【发布时间】:2016-07-2209:46:14【问题描述】:我正在尝试运行覆盖率(使用karma-coverage)和webp... 查看详情
使用 jasmine、chutzpah 和 webpack 进行 Typescript 单元测试
】使用jasmine、chutzpah和webpack进行Typescript单元测试【英文标题】:Typescriptunittestingwithjasmine,chutzpahandwebpack【发布时间】:2017-06-2102:10:58【问题描述】:我正在尝试使用Angular2、Webpack和Chutzpah对typescript进行单元测试,但在为Webpack捆... 查看详情
webpack配置篇(三十七):git规范和changelog生成(代码片段)
说明玩转webpack学习笔记介绍良好的Gitcommit规范优势:加快CodeReview的流程根据GitCommit的元数据生成Changelog后续维护者可以知道Feature被修改的原因技术方案提交格式要求本地开发阶段增加precommit钩子安装huskynpminstallhusky--save-dev... 查看详情
第三十七篇vue(代码片段)
为什么需要测试自动化测试能够预防无意引入的bug,并鼓励开发者将应用分解为可测试、可维护的函数、模块、类和组件。这能够帮助你和你的团队更快速、自信地构建复杂的Vue应用。与任何应用一样,新的Vue应用可能会以多种... 查看详情
vue教程(三十四)webpack之bannerplugin插件(代码片段)
Vue教程(三十四)webpack之BannerPlugin插件plugin是什么?plugin是插件的意思,通常是用于对某个现有的架构进行扩展。webpack中的插件,就是对webpack现有功能的各种扩展,比如打包优化,文件压缩等等。loader和plugin区别loader主要用于转换... 查看详情
jmeter学习(三十四)测试报告优化
如果按JMeter默认设置,生成报告如下:从上图可以看出,结果信息比较简单,对于运行成功的case,还可以将就用着。但对于跑失败的case,就只有一行assert错误信息。(信息量太少了,比较难找到失败原因)优化大致过程:1、下... 查看详情
徒手搭建python单元测试框架
...以及一些单元测试的原则。一般项目如果是web项目都会有配置文件,那么启动单元测试的应用上下文也需要测试用的配置文件。下面是一个基于flask开发的web项目的单元测试配置文件。大家可以参考下。如果项目不是web项目而是... 查看详情
SonarQube、单元测试覆盖率和集成测试覆盖率分别
】SonarQube、单元测试覆盖率和集成测试覆盖率分别【英文标题】:SonarQube,Unittestcoverageandintegrationtestcoverageseparately【发布时间】:2018-10-1804:50:29【问题描述】:是否可以在SonarQube中分别查看/显示单元测试覆盖率和集成测试覆盖率... 查看详情
webpack配置篇(三十八):语义化版本(semanticversioning)规范格式(代码片段)
说明玩转webpack学习笔记开源项目版本信息案例软件的版本通常由三位组成,形如:X.Y.Z版本是严格递增的,此处是:16.2.0->16.3.0->16.3.1在发布重要版本时,可以发布alpha,rc等先行版本alpha和rc等修饰版本的关... 查看详情
性能测试三十四:jvm内存结构(栈堆永久代)
...的分配和对象的创建是在Jvm中用户可以通过一系列参数来配置Jvm Jvm运行时区域做性能测试经常接触到的三个地方:方法区、虚拟机栈、堆jvm主要内存结构(简化版):永久代即上面的方法区占用内存大小排序:堆内存>永... 查看详情
如何在 Quarkus 中覆盖一个单元测试的配置属性
】如何在Quarkus中覆盖一个单元测试的配置属性【英文标题】:HowtooverrideconfigpropertyforoneUnittestinQuarkus【发布时间】:2020-03-1200:52:08【问题描述】:在我的Quarkus应用程序中,如果特定配置属性为真,StartupEvent的观察者会将默认数... 查看详情
使用业力和 webpack 4 运行单元测试时无法读取未定义的属性“externalModuleIndicator”
】使用业力和webpack4运行单元测试时无法读取未定义的属性“externalModuleIndicator”【英文标题】:Cannotreadproperty\'externalModuleIndicator\'ofundefinedwhilerunningunittestusingkarmaandwebpack4【发布时间】:2018-09-0305:59:09【问题描述】:使用webpack4... 查看详情
四十django单元测试:pgsql数据库配置常用测试工具db冲突方案和代码覆盖率实战(代码片段)
单元测试数据库配置默认测试数据库的名称是将settings.py文件中DATABASES变量配置的NAME值前面加上test_。############################################################PostgreSQLDATABASES=\'default\':\'ENGINE\':\'django.db.backends.postgresql_psycopg2\',#数据库引擎\'NA... 查看详情
如何在 IAR 中执行单元测试和代码覆盖
】如何在IAR中执行单元测试和代码覆盖【英文标题】:HowtoperformUnittestingandCodecoverageinIAR【发布时间】:2019-02-1112:21:07【问题描述】:我正在使用IAR嵌入式工作台8.0。我想使用C-spy调试器来执行单元测试和代码覆盖率。有什么方法... 查看详情
webpack原理篇(五十四):tapable是如何和webpack进行关联起来的?(代码片段)
说明玩转webpack学习笔记Tapable是如何和webpack联系起来的?可以看下面这段代码if(Array.isArray(options)) compiler=newMultiCompiler(options.map(options=>webpack(options)));elseif(typeofoptions==="o 查看详情
webpack配置篇(三十六):发布构建包到npm社区(代码片段)
说明玩转webpack学习笔记查找包名是否被使用https://www.npmjs.com/发布到npm添加用户:npmadduser升级版本升级补丁版本号:npmversionpatch升级小版本号:npmversionminor升级大版本号:npmversionmajor发布版本:npmpublish1、登录... 查看详情