Remember we said back in the introduction that we could execute Jasmine without the need of a browser window? To do so, we are going to use PhantomJS, a scriptable headless WebKit browser (the same rendering engine that powers the Safari browser) and Karma, a test runner.
The setup is very simple; using NPM, we once again install some dependencies:
npm install –save-dev karma karma-jasmine karma-webpack karma-phantomjs-launcher es5-shim
The only strange dependency here is the es5-shim, which is used to give PhantomJS support for some ES5 features that it still is missing, and React requires.
The next step is creating a configuration file, named karma.conf.js, for Karma at the project's' root folder:
module.exports = function(config) {
config.set({
basePath: '.',
frameworks: ['jasmine'],
browsers: ['PhantomJS'],
files: [
// shim to workaroud PhantomJS 1.x lack of 'bind' support
// see: https://github.com/ariya/phantomjs/issues/10522
'node_modules/es5-shim/es5-shim.js',
'lib/jquery.js',
'lib/jasmine-jquery.js',
'lib/mock-ajax.js',
'spec/SpecHelper.js',
'spec/**/*Spec.*'
],
preprocessors: {
'spec/**/*Spec.*': ['webpack']
},
webpack: require('./webpack.config.js'),
webpackServer: { noInfo: true },
singleRun: true
});
};In it, we set up the Jasmine framework and the PhantomJS browser:
frameworks: ['jasmine'], browsers: ['PhantomJS'],
Fix the browser compatibility issues on PhantomJS by loading es5-shim, as shown in the following code:
// shim to workaroud PhantomJS 1.x lack of 'bind' support
// see: https://github.com/ariya/phantomjs/issues/10522
'node_modules/es5-shim/es5-shim.js',Load the test runner dependencies, which were previously global in the SpecRunner.html file, as shown in the following code:
'lib/jquery.js', 'lib/jasmine-jquery.js', 'lib/mock-ajax.js', 'spec/SpecHelper.js',
Finally, load all the specs, as follows:
'spec/**/*Spec.*',
By now, you can remove the SpecRunner.html file, the spec entry in the webpack.config.js file, and the lib/jasmine-2.1.3 folder.
Run the tests by invoking Karma, which will print the test results in the console, as follows:
./node_modules/karma/bin/karma start karma.conf.js > [email protected] test /Users/paulo/Dropbox/jasmine_book/second_edition/book/chapter_8/code/webpack-karma > ./node_modules/karma/bin/karma start karma.conf.js INFO [karma]: Karma v0.12.31 server started at http://localhost:9876/ INFO [launcher]: Starting browser PhantomJS INFO [PhantomJS 1.9.8 (Mac OS X)]: Connected on socket cGbcpcpaDgX14wdyzLZh with id 37309028 PhantomJS 1.9.8 (Mac OS X): Executed 36 of 36 SUCCESS (0.21 secs / 0.247 secs)
To make it simpler to run the tests, it is possible to change the package.json project file and describe its test script:
"scripts": {
"test": "./node_modules/karma/bin/karma start karma.conf.js",
"dev": "webpack-dev-server"
},You can then run the tests by simply invoking the following:
npm test