webpack配置篇(三十四):单元测试和测试覆盖率(代码片段)

凯小默 凯小默     2022-12-18     154

关键词:

说明

玩转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/查看更多

单元测试实战

  1. 新建文件夹跟文件,在 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', () => 
        
    );
);
  1. 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');
);
  1. 增加测试脚本
"test": "./node_modules/.bin/_mocha",

  1. 运行脚本
npm run test

  1. 在断言库的基础上添加 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。

  1. 如果你是按照老师的课程去的话 npm i istanbul -D,在脚本里添加 test2:
单元测试:"test": "./node_modules/.bin/_mocha",
测试覆盖率:"test2": "istanbul cover ./node_modules/.bin/_mocha",
  1. 当执行 npm run test2 会报错:

关于这个报错,其实可以参考一下:SyntaxError: missing ) after argument list

  1. windows下路径要换个写法:
单元测试时用:"test": "./node_modules/.bin/_mocha",
测试覆盖率时用:"test2": "istanbul cover ./node_modules/mocha/bin/_mocha",

这个就不多说了。

  1. 接下来看 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 等。

  1. 所以我们先安装:
npm install --save-dev nyc

  1. 然后添加脚本:
"nyc": "nyc ./node_modules/.bin/_mocha",
  1. 接下来执行脚本
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、登录... 查看详情