zyml / es6-karma-jasmine-webpack-boilerplate Goto Github PK

Ran npm test on a clean clone, got this output.

Failing tests always refer to test.webpack.js line numbers:

PhantomJS 1.9.8 (Mac OS X 0.0.0) AbTest.js Spec should assign a random variant from a test case FAILED
Expected undefined not to be undefined.
    at /Users/dbus/Projekte/Pro7Sat1/Variants/tests.webpack.js:123

Adding sourcemaps to the preprocessors fixes this.

Hi there,

I really like this example. Perhaps the only thing I might change is the ability to not have a tests directory but instead to have .test files in the same folder as the code. In large code bases this makes it really easy to find tests. So far I've been unable to get the tests.webpack.js regex's configured just right to be able to perform this. Is this something you think is possible and if so, have you accomplished something like this before?

include: path.resolve(__dirname, '../src'),

karma.config.js#L49

"../src" should be "src" since karma.config.js is in the root directory. I am putting my tests in "spec" instead of "src/test" and when I tried to add "../spec" to the loader it didn't work, but "spec" and "src" did.

It appears that the config is currently including files based on the includes for "babel-istanbul", and this babel loader block doesn't actually have any affect because the path doesn't exist.

Thanks for the boilerplate code and it's very helpful. I wonder how the not operator works in following use case given that, Regex does not support not operators in this format

require.context('./src', true, /!(-test.js)$/);

hi Melvin @zyml I found my webpack.karma.context.js is included in coverage report,how can I exclude it? thanks

webpack.karma.context.js
let context = require.context('./app', true, /\.js/); context.keys().forEach(context);

karma.conf.js
`var webpack = require('webpack');
var path = require('path');
var webpackConfig = require('./webpack.config');

webpackConfig.entry = {};
webpackConfig.output = {};
webpackConfig.module.preLoaders = [
{
test: /.test.js$/,
include: /app/,
exclude: /node_modules/,
loader: 'babel',
query: {
cacheDirectory: true,
},
},
{
test: /.js?$/,
include: /app/,
exclude: [/node_modules/, /.test.js$/, /webpack.karma.context.js/],
loader: 'babel-istanbul',
query: {
cacheDirectory: true,
},
},
{
test: /.html$/,
loader: 'html',
query: {
minimize: true
}
}
];

module.exports = function(config) {
config.set({
browsers: ['Chrome'],
frameworks: ['jasmine'],
reporters: ['progress', 'coverage', 'spec'],
coverageReporter: {
// output coverage reports
//type : 'html',
dir : 'coverage/',
reporters: [
{ type: 'text-summary', subdir: '.', file: 'text-summary.txt' },
{type: 'html', dir : 'coverage/',}
],
includeAllSources: true
},
logLevel: config.LOG_INFO, //config.LOG_INFO, config.LOG_DEBUG
autoWatch: true,
singleRun: false,
colors: true,
port: 9876,
basePath: '',

	webpack:webpackConfig,
	files: [ { pattern: 'webpack.karma.context.js', watched: false } ],
    preprocessors: { 'webpack.karma.context.js': ['webpack', 'sourcemap', 'coverage'] },
    exclude: [],
	webpackServer: {
		noInfo: true,
	},
	concurrency: Infinity,
	plugins:[
    require('karma-webpack'),
    'karma-chrome-launcher',
	'karma-jasmine',
	'karma-coverage',
	'karma-spec-reporter',
	'karma-sourcemap-loader'
	]
});

};`

webpack.config.js

`var webpack = require('webpack');
const prod = process.argv.indexOf('-p') !== -1;

/*

• Default webpack configuration for development
  */
  var config = {
  devtool: 'inline-source-map', //devtool: 'source-map',
  entry: {
  ngApp : __dirname + "/app/ngApp.js",
  },
  output: {
  path: __dirname + "/public",
  filename: "[name].bundle.js"
  },
  module: {
  preLoaders: [
  {
  test: /.js?$/,
  include: /app/,
  exclude: [/node_modules/, /.test.js$/, /webpack.karma.context.js/],
  loader: 'babel',
  query: {
  cacheDirectory: true,
  },
  },
  {
  test: /.html$/,
  loader: 'html',
  query: {
  minimize: true
  }
  }
  ],
  loaders: [
  {
  test: /.js$/,
  include: /app/,
  exclude: [/node_modules/, /.test.js$/, /webpack.karma.context.js/],
  loader: 'babel',
  },
  {
  test: /.html$/,
  loader: 'html',
  query: {
  minimize: true
  }
  }
  ]
  },
  devServer: {
  contentBase: "./public",
  colors: true,
  historyApiFallback: true,
  inline: true
  },
  plugins: [
  new webpack.optimize.OccurenceOrderPlugin(),
  new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
  })
  ]
  }

if (prod) { config.devtool = false;
config.plugins.push( new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}) );
config.plugins.push( new webpack.optimize.UglifyJsPlugin({ minimize: true, comments: false, compressor:{warnings:false} }) );
};
module.exports = config;
`

While debugging the unit test in Chrome I noticed the the source file was missing the sourceMappingURL and not rendering correctly. Is there an easy fix for this?

Hi

Im getting the following issue when running the tests:

ERROR in Cannot find module 'loader-utils'
@ ./src/tests/Calculator-test.js 3:18-42
webpack: bundle is now VALID.
18 01 2016 16:10:01.606:WARN [karma]: Port 9876 in use
18 01 2016 16:10:01.609:INFO [karma]: Karma v0.13.19 server started at http://localhost:9877/
18 01 2016 16:10:01.656:INFO [launcher]: Starting browser Chrome
18 01 2016 16:10:03.251:INFO [Chrome 47.0.2526 (Mac OS X 10.11.2)]: Connected on socket /#inJfuJ90GFw2rQWAAAAA with id 22879750
Chrome 47.0.2526 (Mac OS X 10.11.2) ERROR
Uncaught Error: Cannot find module "../Calculator"
at /Users/l/es6-karma-jasmine-webpack-boilerplate/tests.webpack.js:81

thanks

I made sure i did not have global packages of karma or anything else to conflict while running this.
Then i ran:
npm install
npm build
npm test

Here is the full error output:

"C:\Program Files (x86)\JetBrains\IntelliJ IDEA 2017.1\bin\runnerw.exe" "D:\Program Files\nodejs\node.exe" "D:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" test

> [email protected] test D:\dev\temp\node_modules\es6-karma-jasmine-webpack-boilerplate
> karma start --single-run --no-auto-watch karma.config.js

Hash: f4683f5fa2953dc3a97c
Version: webpack 1.14.0
Time: 43ms
webpack: Compiled successfully.
webpack: Compiling...
Hash: af8ce34dc40fb7aeed94
Version: webpack 1.14.0
Time: 52ms
           Asset     Size  Chunks             Chunk Names
tests.webpack.js  7.92 kB       0  [emitted]  tests.webpack.js
chunk    {0} tests.webpack.js (tests.webpack.js) 950 bytes [rendered]
    [0] ./tests.webpack.js 214 bytes {0} [built]
    [1] ./src -test\.js$ 195 bytes {0} [built]
    [2] ./src/__tests__/Calculator-test.js 381 bytes {0} [optional] [built]
    [3] ./src !(-test\.js)$ 160 bytes {0} [built]
webpack: Compiled successfully.
05 04 2017 23:08:20.858:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
05 04 2017 23:08:20.869:INFO [launcher]: Starting browser Chrome
05 04 2017 23:08:21.312:INFO [Chrome 57.0.2987 (Windows 10 0.0.0)]: Connected on socket V-1D8oUMnXuRWU0gAAAA with id 98632320
Chrome 57.0.2987 (Windows 10 0.0.0) ERROR
  Uncaught SyntaxError: Unexpected token import
  at D:/dev/temp/node_modules/es6-karma-jasmine-webpack-boilerplate/tests.webpack.js:79


npm ERR! Test failed.  See above for more details.

Process finished with exit code 1

It seems the file does not get transpiled correctly else it would not have an import.

Since i was having trouble getting es6 in my tests i decided to try this boilerplate out but it has the same issue as i have encountered.