详解使用mocha对webpack打包的项目进行"冒烟测试"的大致流程

第一步: 打包开始之前删除'./dist'目录

rimraf('./dist', () => {

constprodConfig = require('../../lib/webpack.prod')
webpack(prodConfig, (err, stats) \=> {
if (err) {
  console.log(err)
  process.exit(2)
  }

console.log(stats.toString({
  color:true,
  modules:false,
  children:false
  }))

// 第三步: 将测试规则添加到打包后
mocha.addFile(resolve(\_\_dirname, './html-test.js'))
mocha.addFile(resolve(\_\_dirname, './css-js-test.js'))
mocha.run()
})
})

第二步: 新建测试规则

const glob = require('glob');
describe('Checking generated html files',() \=> {
  it('should generate html files', (done) \=> {
  constfiles = glob.sync('./dist/+(index|search).html')
  if (files.length) {
    done()
  } else {
    thrownewError('no html files generated')
  }
 });
});

Tip: 关于glob.sync()方法的特别说明:

  • pattern {String}：匹配模式。
  • options {Object}
  • return: {Array<String>}：匹配模式下的文件名。

这里重点说说这个pattern, 这个pattern是字符串, 不是正则, 它有自己的匹配规则, 例如:

'./dist/+(index|search).html'

换成正则的写法为:

/\.\/dist\/(index|search)\.html/

不能苟同, 一定要区分

具体请移步这里: https://github.com/isaacs/node-glob

到此这篇关于详解使用mocha对webpack打包的项目进行"冒烟测试"的大致流程的文章就介绍到这了,更多相关mocha webpack 冒烟测试内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 关于Vue Webpack2单元测试示例详解

    前言 最近发现一个问题,vue-cli 提供的官方模板确实好用.但一直用下来手贱毛病又犯了,像穿了别人的内衣,总感觉不舒服. 所以有机会就瞎倒腾了一遍,总算把各个流程摸了一把.这里分享一下配置带覆盖率的单元测试.分享出来供大家参考学习,话不多少了,来一起看看详细的介绍: 一.文件结构 基本的文件结构. ├─src │ ├─assets │ ├─components │ ├─app.vue │ └─main.js ├─test │ └─unit │ ├─coverage │ ├─specs │ ├

  • karma+webpack搭建vue单元测试环境的方法示例

    karma+webpack搭建vue单元测试环境的方法示例

    最近做了一次关于vue组件自动化测试的分享,现在将vue组件单元测试环境搭建过程整理一下.这次搭建的测试环境和开发环境隔离,所以理论上适用所有使用vue的开发环境. 准备 这篇文章的重点在于搭建测试环境,所以我随便写了个webpack的vue开发环境. 代码地址:https://github.com/MarxJiao/vue-karma-test 目录结构如下 目录结构 app.vue和child.vue代码 app.vue child.vue 运行效果如下: 运行效果 测试环境搭建 注意:这里

  • 详解使用mocha对webpack打包的项目进行"冒烟测试"的大致流程

    第一步: 打包开始之前删除'./dist'目录 rimraf('./dist', () => { constprodConfig = require('../../lib/webpack.prod') webpack(prodConfig, (err, stats) \=> { if (err) { console.log(err) process.exit(2) } console.log(stats.toString({ color:true, modules:false, childre

  • 详解webpack打包vue项目之后生成的dist文件该怎么启动运行

    亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run build(在package.json的scripts配置) 执行成功如下图所示: 然后此时你会发现项目下多了一个 dist 文件夹,dist下文件便是项目打包之后生成的文件. 此时我们直接在浏览器中打开index.html,是会报错的,什么都看不到. 2. 安装express-generator生成

  • 详解Webpack4多页应用打包方案

    前言 学习了 webpack 之后,将自己的博客的前端进行重构,由于自己的博客是多页应用,所以研究了下多页应用的打包方案.在这里把最后配置的成果分享下,不足之处,请指正.(文字不多,全是代码,不是配置教程,所以没有特别详细的写,只是一个参考) 项目地址: https://github.com/Ray-daydayup/MPA-webpack 文件目录结构 项目目录结构 首先先看下我的项目的目录结构 myblog-webpack ├── dist // 打包输出文件夹 ├── src // 源代码

  • webpack打包nodejs项目的方法

    适用情况 首先说明,此情况不具备普遍性.若你的情况与笔者类似那么希望这篇文章能够帮到你. 我的项目情况是这样的:用node.js做后台,ejs做模板引擎(即整个页面是一个ejs文件)由node.js将数据渲染完成后,再将完整页面返回给用户. 那么这样做会遇到的问题: 1. 本项目没有html页面,ejs的作用也不是引入公共的组件,直接就是一个完整的页面,用webpack中处理ejs文件的loader返回的是一个函数,故会产生问题 2.由于node.js配置了静态资源目录public,而视图目录与

  • 详解pycharm的newproject左侧没有出现项目选项的情况下创建Django项目的解决方法/社区版pycharm创建django项目的方法

    首先,我当时出现的问题是newproject创建的时候没有django的选项,查了半天发现我安装的pycharm是社区版本.所以需要用终端命令行的方式创建django项目. 首先,随便打开一个项目,然后在pycharm界面的左下角有Terminal终端的图标,点开. cd返回根目录 在终端输入你PycharmProjects的目录,由于我是mac 端,我输入的是:cd /Users/apple/PycharmProjects 进入目录后,输入:django-admin startproject

  • 详解vue-cli脚手架中webpack配置方法

    什么是webpack webpack是一个module bundler(模块打包工具),所谓的模块就是在平时的前端开发中,用到一些静态资源,如JavaScript.CSS.图片等文件,webpack就将这些静态资源文件称之为模块 webpack支持AMD和CommonJS,以及其他的一些模块系统,并且兼容多种JS书写规范,可以处理模块间的以来关系,所以具有更强大的JS模块化的功能,它能对静态资源进行统一的管理以及打包发布,在官网中用这张图片介绍: 它在很多地方都能替代Grunt和Gulp,因为它

  • 详解浏览器缓存和webpack缓存配置

    详解浏览器缓存和webpack缓存配置

    浏览器缓存 浏览器缓存分为两种类型: 强缓存:也称为本地缓存,不向服务器发送请求,直接使用客户端本地缓存数据 协商缓存:也称304缓存,向服务器发送请求,由服务器判断请求文件是否发生改变.如果未发生改变,则返回304状态码,通知客户端直接使用本地缓存:如果发生改变,则直接返回请求文件. 浏览器缓存机制的过程如下: 强缓存(本地缓存) 强缓存是最彻底的缓存,无需向服务器发送请求,通常用于css.js.图片等静态资源.浏览器发送请求后会先判断本地是否有缓存.如果无缓存,则直接向服务器发送请求:如果有

  • 详解使用vue脚手架工具搭建vue-webpack项目

    详解使用vue脚手架工具搭建vue-webpack项目

    对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地址即可.但是,这并不算是一个完整的vue实际应用.在实际应用中,我们必须要一系列的工具,包括:模块化,转译,预处理,热加载,静态检测和自动化测试等.对于一个需要长期维护和大型的项目而言,这些工具是必不可少的,但是尝试配置初始化这些很痛苦.这就是我们发布vue官方提供的脚手架工具的原因,一个简单的构建工具,通过几个默认的步骤帮助你快速的构建Vue.js项目. 1.安装node环境 可以

  • 详解python3 + Scrapy爬虫学习之创建项目

    最近准备做一个关于scrapy框架的实战,爬取腾讯社招信息并存储,这篇博客记录一下创建项目的步骤 pycharm是无法创建一个scrapy项目的 因此,我们需要用命令行的方法新建一个scrapy项目 请确保已经安装了scrapy,twisted,pypiwin32 一:进入你所需要的路径,这个路径存储你创建的项目 我的将放在E盘的Scrapy目录下 二:创建项目:scrapy startproject ***(这个是项目名) 这样就创建好了一个名为tencent的项目 三:进入项目新建一个爬虫:

  • 详解webpack打包nodejs项目(前端代码)

    随着前端体积越来越大,功能越来越丰富,这时候就需要将前端工程化,而webpack就是用于将前端各种文件打包起来.一个简单的webpack应该包含以下几个概念 入口起点 输出 配置 组件 加载器 插件 模块 模块热替换 适用情况 首先说明,此情况不具备普遍性.若你的情况与笔者类似那么希望这篇文章能够帮到你. 我的项目情况是这样的:用node.js做后台,ejs做模板引擎(即整个页面是一个ejs文件)由node.js将数据渲染完成后,再将完整页面返回给用户. 那么这样做会遇到的问题: 1. 本项目没

随机推荐