与前端训练营的日子 -- Week18

SamGo

关注

发布于: 2021 年 03 月 07 日

承接上周笔记，这周的学习任务是测试工具，最后将两周学习的工具链组合起来，完成一个包含 generator、build、test 的工具。不知不觉，已经学了十八周了，还有两周的学习任务，训练营就要结束。整体来说，这个训练营还是很值得的。

第三步，Test 工具

非一次性的业务代码，建议尽量使用单元测试，保障代码稳定性。

单元测试--Mocha

Mocha是目前比较流行的测试框架之一(还有一个Jest)。Mocha最早也是一个针对 Node.js 的测试框架，所以默认在使用Webpack之前，都不支持import 、export的。

安装Mocha

全局安装npm install --global mocha

局部安装npm install --save-dev mocha

安装babel/register

为了解决Mocha在使用Webpack之前，都不支持import 、export的问题，需用用到babel/register

安装方式：npm install --save-dev @babel/core @babel/register

通过.babelrc文件配置JavaScript代码转换方式

{       "presets": ["@babel/preset-env"],}

复制代码

使用mocha --require @babel/register命令执行测试

如果用全局的mocha命令会出现MODULE_FOUND，所以建议用以下命令，调用本地的mocha

./node_modules/.bin/mocha --require @babel/register

代码覆盖(code coverage) -- nyc

代码覆盖(code coverage)，表示测试覆盖了源文件的哪些代码。nyc是istanbuljs的命令行工具，可用于 coverage，它可以在一个复杂的文件里计算最终测试的覆盖比例。

安装nyc

安装方式：npm install --save-dev nyc

使用nyc

nyc ./node_modules/.bin/mocha

让nyc支持babel

安装babel-plugin-istanbul
配置.babelrc文件

{       "presets": ["@babel/preset-env"],       "plugins": ["istanbul"]}

复制代码

配置.nycrc文件

{      "extends": "@istanbuljs/nyc-config-babel"}

复制代码

最后执行nyc ./node_modules/.bin/mocha --require @babel/register就可以正常通过babel解决了不支持import 、export的问题，同时又能进行代码覆盖测试

所有工具与 generator 集成

将脚手架(generator)、构建(build)、测试(test)三个工具都整合到一起

以下是index.js 的部分代码

var Generator = require('yeoman-generator');
module.exports = class extends Generator {    // The name `constructor` is important here    constructor(args, opts) {        // Calling the super constructor is important so our generator is correctly set up        super(args, opts);
    }
    async initPackage() {
        let answer = await this.prompt([            {                type: "input",                name: "name",                message: "Your project name",                default: this.appname // Default to current folder name            }        ]);
        const pkgJson = {            "name": answer.name,            "version": "1.0.0",            "description": "",            "main": "generators/app/index.js",            "scripts": {              // 配置要运行的脚本命令，npm run build/test/coverage就会执行对应的命令                "build": "webpack",                "test": "mocha --require @babel/register",                "coverage": "nyc mocha --require @babel/register"            },            // 省略部分代码        };              // Extend or create package.json file in destination path        this.fs.extendJSON(this.destinationPath('package.json'), pkgJson);        this.npmInstall(["vue"], { 'save-dev': false});      	// 配置好需要package，可以指定版本         this.npmInstall([            "webpack@4.44.1",            "webpack-cli@3.3.12",            "vue-loader@15.9.3",            "vue-style-loader@4.1.2",            "babel-loader@8.1.0",            "@babel/core@7.11.6",            "@babel/preset-env@7.11.5",            "@babel/register@7.11.5",            "@istanbuljs/nyc-config-babel@3.0.0",            "babel-plugin-istanbul@6.0.0",            "mocha@8.1.3",            "nyc@15.1.0",            "css-loader@4.2.2",            "vue-template-compiler@2.6.12",            "copy-webpack-plugin@6.0.3"],            { 'save-dev': true}        );
        this.fs.copyTpl(            this.templatePath('HelloWorld.vue'),            this.destinationPath('src/HelloWorld.vue'),            {}        );
        // 省略部分代码};

复制代码

在上周的基础上，将.nycrc和.babelrc两个配置文件添加进templates里并通过fs.copyTpl复制到生成的项目中，再按照以上index.js配置好需要的packages 以及scripts就完成了整个工具链的集成了。通过这个工具生成的项目就包含了基本的项目资源以及 build、test 功能。

本周学习内容

单元测试工具--Mocha
代码覆盖(code coverage) -- nyc
所有工具与 generator 的集成

参考资料

Mocha官网

nyc - npm

发布于: 2021 年 03 月 07 日阅读数: 11

SamGo

关注

还未添加个人签名 2018.12.16 加入

iOS渣渣，Flutter练习生，极客大学在学🤣🤣

发布

暂无评论

创作场景

与前端训练营的日子 -- Week18

第三步，Test 工具

单元测试--Mocha

代码覆盖(code coverage) -- nyc

所有工具与 generator 集成

本周学习内容

参考资料

SamGo

评论