pixelbits pixelbits - 1 year ago 405
AngularJS Question

gulp-jasmine Window is not defined error

I am using gulp / gulp-jasmine / angular to run my unit tests. However, I encounter the following error when running my Gulp target:

C:\Projects\website2>gulp test
[01:53:10] Using gulpfile C:\Projects\website2\gulpfile.js
[01:53:10] Starting 'test'...
[01:53:11] Version: webpack 1.4.13
Asset Size Chunks Chunk Names
test.bundle.js 1051728 0 [emitted] test

1) Exception loading: C:\Projects\website2\scripts\dist\test.bundle.js Error
1.1) ReferenceError: window is not defined

1 spec, 1 failure
Finished in 0.015 seconds
[01:53:11] 'test' errored after 916 ms
[01:53:11] Error in plugin 'gulp-jasmine'
Tests failed

I believe gulp-jasmine uses PhantomJS (no browser window is triggered). Can someone help me with what I'm doing wrong? Is there a configuration setting I'm missing?

Here is my gulpfile.js:

var gulp = require('gulp');
var path = require('path');
var webpack = require('gulp-webpack');
var webpackConfig = require('./webpack.config');
var testWebpackConfig = require('./test.webpack.config');
var jasmine = require('gulp-jasmine');

gulp.task('default', ['build'], function() {


gulp.task('build', function() {
return gulp.src(['scripts/app/**/*.js', '!scripts/app/**/*.tests.js'])

gulp.task('test', function() {
return gulp.src(['scripts/app/**/*.tests.js'])

Answer Source

gulp-jasmine runs the tests through Node.js and thus is not suitable for client side testing, see https://github.com/sindresorhus/gulp-jasmine/issues/46

For client side tests, if you want to use Jasmine (instead of Karma or in parallel), you can write a SpecRunner.html file (the name does not matter) and run it in your browser:

<!DOCTYPE html>
    <meta charset="utf-8">
    <title>Jasmine Spec Runner</title>

    <!-- You need to specify package 'jasmine-core' in your Node.js package.json -->

    <link rel="shortcut icon" href="node_modules/jasmine-core/images/jasmine_favicon.png">
    <link rel="stylesheet" href="node_modules/jasmine-core/lib/jasmine-core/jasmine.css">

    <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
    <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
    <script src="node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>

    <!-- Source and Spec dependencies -->
    <script src="node_modules/underscore/underscore.js"></script>
    <script src="node_modules/angular/angular.js"></script>
    <script src="node_modules/angular-mocks/angular-mocks.js"></script>

    <!-- Source files -->
    <script src="app/MySourceCode1.js"></script>
    <script src="app/MySourceCode2.js"></script>

    <!-- Spec files -->
    <script src="test/MySourceCode1.spec.js"></script>
    <script src="test/MySourceCode2.spec.js"></script>

Or use gulp-jasmine-browser:

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();

// You need to specify packages 'jasmine-core' and 'gulp-jasmine-browser'
// in your Node.js package.json

gulp.task('jasmine', function() {
  return gulp.src([


Or use Karma :)