[Webpack 2] Use Karma for Unit Testing with Webpack
When writing tests run by Karma for an application that’s bundled with webpack, it’s easiest to integrate webpack and Karma directly together. In this lesson we’ll see how to utilize the karma-webpack
plugin and reuse our existing webpack configuration to preprocess our test files with webpack.
karma.config.js:
const webpackEnv = {test: true}
const webpackConfig = require('./webpack.config')(webpackEnv)
const fileGlob = 'src/js/**/*.test.js' module.exports = function setKarmaConfig(config) {
config.set({
basePath: '',
frameworks: ['mocha', 'chai'],
files: [fileGlob],
preprocessors: {
[fileGlob]: ['webpack']
},
webpack: webpackConfig,
webpackMiddleware: {noInfo: true}, // no webpack output
reporters: ['progress'],
port: ,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: false,
browsers: ['Chrome'],
singleRun: true,
concurrency: Infinity
})
}
webpack.config.js:
const {resolve} = require('path')
module.exports = env => {
return {
entry: './js/app.js',
output: {
filename: 'bundle.js',
path: resolve(__dirname, 'dist'),
pathinfo: !env.prod,
},
context: resolve(__dirname, 'src'),
devtool: env.prod ? 'source-map' : 'eval',
bail: env.prod,
module: {
loaders: [
{test: /\.js$/, loader: 'babel!eslint', exclude: /node_modules/},
{test: /\.css$/, loader: 'style!css'},
],
},
}
}
package.json:
{
"private": true,
"dependencies": {
"todomvc-app-css": "2.0.4",
"todomvc-common": "1.0.2"
},
"devDependencies": {
"babel": "6.5.2",
"babel-core": "6.8.0",
"babel-eslint": "6.0.4",
"babel-loader": "6.2.4",
"babel-preset-es2015-webpack": "6.4.1",
"babel-preset-stage-2": "6.5.0",
"chai": "3.5.0",
"cpy-cli": "1.0.0",
"css-loader": "0.23.1",
"eslint": "2.9.0",
"eslint-config-kentcdodds": "6.2.1",
"eslint-loader": "1.3.0",
"ghooks": "1.2.1",
"karma": "0.13.22",
"karma-chai": "0.1.0",
"karma-chrome-launcher": "1.0.1",
"karma-mocha": "1.0.1",
"karma-webpack": "1.7.0",
"mocha": "2.5.3",
"npm-run-all": "1.8.0",
"opt-cli": "1.4.2",
"rimraf": "2.5.2",
"style-loader": "0.13.1",
"webpack": "2.1.0-beta.7",
"webpack-dev-server": "2.0.0-beta",
"webpack-validator": "2.1.0"
},
"config": {
"ghooks": {
"pre-commit": "opt --in pre-commit --exec \"npm run validate\""
}
},
"scripts": {
"test": "karma start",
"watch:test": "npm test -- --auto-watch --no-single-run",
"validate": "npm-run-all --parallel validate-webpack:* lint",
"validate-webpack:dev": "webpack-validator webpack.config.js --env.dev",
"validate-webpack:prod": "webpack-validator webpack.config.js --env.prod",
"clean-dist": "rimraf dist",
"copy-files": "cpy src/index.html src/favicon.ico dist",
"clean-and-copy": "npm run clean-dist && npm run copy-files",
"prestart": "npm run clean-and-copy",
"start": "webpack-dev-server --env.dev --content-base dist",
"prebuild": "npm run clean-and-copy",
"prebuild:prod": "npm run clean-and-copy",
"build": "webpack --env.dev",
"build:prod": "webpack --env.prod -p",
"lint": "eslint ."
}
}
test file:
import Controller from './controller' describe('controller', () => {
it('exists', () => {
expect(Controller).to.exist
})
})
[Webpack 2] Use Karma for Unit Testing with Webpack的更多相关文章
- [Unit Testing] AngularJS Unit Testing - Karma
Install Karam: npm install -g karma npm install -g karma-cli Init Karam: karma init First test: 1. A ...
- Unit Testing with NSubstitute
These are the contents of my training session about unit testing, and also have some introductions a ...
- [Java Basics3] XML, Unit testing
What's the difference between DOM and SAX? DOM creates tree-like representation of the XML document ...
- Javascript单元测试Unit Testing之QUnit
body{ font: 16px/1.5em 微软雅黑,arial,verdana,helvetica,sans-serif; } QUnit是一个基于JQuery的单元测试Uni ...
- C/C++ unit testing tools (39 found)---reference
http://www.opensourcetesting.org/unit_c.php API Sanity AutoTest Description: An automatic generator ...
- Unit testing Cmockery 简单使用
/********************************************************************** * Unit testing Cmockery 简单使用 ...
- Unit Testing a zend-mvc application
Unit Testing a zend-mvc application A solid unit test suite is essential for ongoing development in ...
- Unit Testing PowerShell Code with Pester
Summary: Guest blogger, Dave Wyatt, discusses using Pester to analyze small pieces of Windows PowerS ...
- MVC Unit Testing学习笔记
MVC Unit Testing 参考文档: 1.http://www.asp.net/mvc/overview/testing 2.http://www.asp.net/mvc/tutorials/ ...
随机推荐
- 获取保存在沙盒中plist文件的用户的字典信息
获取保存在沙盒中plist文件的用户的字典信息
- UIcollectionView的使用(首页的搭建4)
2.5 头部视图
- PDF文件结构
概述PDF是一种不依赖应用程序软件.硬件和操作系统的文件格式.PDF页包含文本.图形和图像.页面外观由内容流(content stream)描述,内容流包含一些列图形对象(graphics objec ...
- Cppcheck 用法(上篇)
http://blog.csdn.net/u011012932/article/details/52778149
- js中JSON对象和字符串对象相互转化
JSON.stringify(value [, replacer] [, space]) //作用,将json数据转化为字符串value:是必须要的字段.就是你输入的对象,比如数组啊,类啊等等. re ...
- Android ExpandableListView使用+获取SIM卡状态信息
ExpandableListView 是一个可以实现下拉列表的控件,大家可能都用过QQ,QQ中的好友列表就是用ExpandableListView实现的,不过它是自定义的适配器.本篇 博客除了要介绍E ...
- 《深入理解linux内核》第二章 内存寻址
三种不同的内存地址 逻辑地址(logical address)包含在linux实际指令中的地址,即分段式地址,是对应的硬件平台段式管理转换前地址由16位的段选择符(segment selector)和 ...
- 学习笔记-[Maven实战]-第三章:Maven使用入门(2)
使用maven执行编译和测试 1.maven执行编译 (1).在pom.xml上点右键,选择Maven build... (2).在Goals里输入clean complie,执行编译 执行结果: [ ...
- Android handler 报错处理Can't create handler inside thread that has not called Looper.prepare()
问题: 写了一个sdk给其他人用,提供一个回调函数,函数使用了handler处理消息 // handler监听网络请求,完成后操作回调函数 final Handler trigerGfHandler ...
- 【HDOJ】1540 Tunnel Warfare
还不错的一道线段树区间合并.挺巧妙的用法. /* 1540 */ #include <iostream> #include <string> #include <map& ...