美文网首页
Karma+mocha+es6+webpack配置自动化前端环境

Karma+mocha+es6+webpack配置自动化前端环境

作者: HiFi不二 | 来源:发表于2018-03-20 08:28 被阅读143次

    安装依赖

    1 全局安装 karma-cli

    2 安装webpack 2/3

    3 安装karma,karma-mocha,karma-chai,karma-chrome-launcher,mocha,chai

    4 安装 karma-webpack, babel-core,babel-preset-dev,babel-loader,babel-plugin-istanbul

    配置

    karma init 初始化配置文件

    根据配置文件做相应修改

    主要是files,plugins,webpack,exclude

    由于是es6模块引入,只要添加测试文件入口即可。

    Plugins即上述的karma-x插件。

    Webpack配置对象的子集,注意不用入口和输出配置。可在babel-loader的options配置preset:["dev"],plugins:["istanbul"].

    Exclude 掉node_modules里的j s 。

    使用karma-coverage

    Preprocessor 添加待测试文件和测试文件,预处理器都为webpack 。

    Reporter处添加coverage 。

    可配置其输出位置。

    使用karma-mocha-report 替换progress报告。

    可配置其格式。

    注意webpack只需要配置rules 不需要入口和出口,入口已经有karma的files控制了。

    开启

    karma start或者写入npm test中。

    karma.config.js文件加入chai,则不用导入chai和expect

    可能会遇到的问题

    安装依赖问题

    1karma-webpack 前先安装webpack 版本2,3不要4。

    2各种module找不到,手动装完一个又一个。解决方案。手动删除node_modules,清空npm cache:npm cache clean --force,重装。还不行,就重新开启一个不同名的项目文件夹,完全干净的项目环境,否则系统缓存很强。

    加入karma-coverage 可能会失效,显示各种0,检查webpack配置里添加istanbul插件。preprocessor里要加入如src里的待测试文件。

    相关文章

      网友评论

          本文标题:Karma+mocha+es6+webpack配置自动化前端环境

          本文链接:https://www.haomeiwen.com/subject/vtcvqftx.html