webpack配置篇（三十三）：冒烟测试介绍和实际运用

Posted 2021-07-10 凯小默

说明

玩转webpack学习笔记

冒烟测试 (smoke testing)

冒烟测试是指对提交测试的软件在进行详细深入的测试之前而进行的预测试，这种预测试的主要目的是暴露导致软件需重新发布的基本功能失效等严重问题。

冒烟测试执行

构建是否成功

每次构建完成 build 目录是否有内容输出

• 是否有 JS、CSS 等静态资源文件
• 是否有 html 文件

判断构建是否成功

在示例项目里面运行构建，看看是否有报错

判断基本功能是否正常

编写 mocha 测试用例

• 是否有 JS、CSS 等静态资源文件
• 是否有 HTML 文件

冒烟测试实战

1、在 test 文件夹里面添加冒烟测试的文件夹 smoke，在 smoke 文件夹里面添加模板项目 template，里面的文件就拷贝 my-project 的主要文件即可，如下所示

2、完成这一步之后，我们需要用到 rimraf 这个库去删除 dist 这个文件夹，先安装依赖

npm i rimraf -D

3、最后我们开始编写测试脚本 index.js

const path = require('path');
const webpack = require('webpack');
const rimraf = require('rimraf');

// 进入到 template 项目里
process.chdir(path.join(__dirname, 'template'));

// 构建之前需要删掉 dist 目录
rimraf('./dist', () => {
    // 找到打包的配置
    const prodConfig = require('../../lib/webpack.prod.js');
    // 通过 webpack 运行构建
    webpack(prodConfig, (err, stats) => {
        // 错误的情况
        if (err) {
            console.error(err);
            process.exit(2);
        }
        // 成功打印
        console.log(stats.toString({
            colors: true,
            modules: false, // 不显示
            children: false
        }));
    });
});

4、运行脚本

node test/smoke/index.js

如果报下面的错：

需要将 __dirname 改成 process.cwd()

__dirname会指向lib，process.cwd()指向template

参考资料：NodeJs中process.cwd()与__dirname的区别

• process.cwd() 是当前执行node命令时候的文件夹地址 ——工作目录，保证了文件在不同的目录下执行时，路径始终不变
• __dirname 是被执行的js 文件的地址 ——文件所在目录

修改如图：记得 base 里的都要替换掉

再次运行就会发现构建成功了

单元测试用例

需要编写两个文件

• css-js-test.js：用来检测 JS、CSS 等静态资源文件
• html-test.js：用来检测 HTML 文件

1、在开始之前，我们需要安装 mocha，以及glob-all

npm i mocha -D
npm i glob-all -D

关于 mocha 可以看一下我转载阮一峰大佬的文章：测试框架 Mocha 实例教程

2、编写测试脚本

html-test.js

const glob = require('glob-all');

describe('Checking generated html files', () => {
    it('should generate html files', (done) => {
    	// 同步判断是否生成文件
        const files = glob.sync([
            './dist/index.html',
            './dist/search.html'
        ]);

        if (files.length > 0) {
            done();
        } else {
            throw new Error('no html files generated');
        }
    });
});

css-js-test.js

const glob = require('glob-all');

describe('Checking generated css js files', () => {
    it('should generate css js files', (done) => {
        const files = glob.sync([
            './dist/index_*.js',
            './dist/index_*.css',
            './dist/search_*.js',
            './dist/search_*.css',
        ]);

        if (files.length > 0) {
            done();
        } else {
            throw new Error('no css js files generated');
        }
    });
});

3、在index里面添加测试用例

const path = require('path');
const webpack = require('webpack');
const rimraf = require('rimraf');
const Mocha = require('mocha');

// 设置超时时间
const mocha = new Mocha({
    timeout: '10000ms'
});

// 进入到 template 项目里
process.chdir(path.join(__dirname, 'template'));

// 构建之前需要删掉 dist 目录
rimraf('./dist', () => {
    // 找到打包的配置
    const prodConfig = require('../../lib/webpack.prod.js');
    // 通过 webpack 运行构建
    webpack(prodConfig, (err, stats) => {
        // 错误的情况
        if (err) {
            console.error(err);
            process.exit(2);
        }
        // 成功打印
        console.log(stats.toString({
            colors: true,
            modules: false, // 不显示
            children: false
        }));
        // 开始执行测试用例
        console.log('Webpack build success, begin run test.');
        // 添加测试用例
        mocha.addFile(path.join(__dirname, 'html-test.js'));
        mocha.addFile(path.join(__dirname, 'css-js-test.js'));
        // 跑用例
        mocha.run();
    });
});

4、执行脚本

node test/smoke/index.js

发现用例可以正常跑出来