angular2/testing beforeEach is not a function

Question

So I am using Gulp, Gulp-Jasmine, and SystemJS to test an Angular2 demo app. Really simple. I have managed to get a System.config block to work and the spec file to load, however it falls over when attempting to run the beforeEach block with the following error...

{ [Error: TypeError: _global.beforeEach is not a function at Object.eval (D:/ng2demo/node_modules/angular2/src/testing/matcher s.js:26:9) at eval (D:/ng2demo/node_modules/angular2/src/testing/matchers.js:20 5:4) at eval (D:/ng2demo/node_modules/angular2/src/testing/matchers.js:20 6:3) at eval (native) at Object.eval (D:/ng2demo/node_modules/angular2/src/testing/testing .js:10:18) at eval (D:/ng2demo/node_modules/angular2/src/testing/testing.js:245 :4) at eval (D:/ng2demo/node_modules/angular2/src/testing/testing.js:246 :3) at eval (native) Evaluating D:/ng2demo/node_modules/angular2/src/testing/matchers.js Evaluating D:/ng2demo/node_modules/angular2/src/testing/testing.js Evaluating D:/ng2demo/node_modules/angular2/testing.js Error loading D:/ng2demo/app/assets/services/config.service.spec.js] originalErr: [TypeError: _global.beforeEach is not a function] }

My gulp task is outlined below...

var gulp = require('gulp');
var jasmine = require('gulp-jasmine');
var System = require('systemjs');

gulp.task('newtest', () => {
    System.config({
        baseURL: "",
        transpiler: 'typescript',
        defaultJSExtensions: true,
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js'
            },
        },      
        map:{           
            'angular2':'node_modules/angular2',
            'rxjs':'node_modules/rxjs',
        },
    });

    Promise.all([
        System.import('app/assets/services/config.service.spec'),
    ]).then(function(){     
        gulp.src(['app/assets/services/config.service.spec'])
            .pipe(jasmine())
    }).catch(console.error.bind(console));
});

my spec file looks like this...

/// <reference path="../../../typings/browser/ambient/systemjs/index.d.ts"/>
/// <reference path="../../../typings/browser/ambient/jasmine/index.d.ts"/>

import {Injector, provide} from "angular2/core";
import {Http, BaseRequestOptions, Response, ResponseOptions} from "angular2/http";
import {MockBackend} from "angular2/http/testing";
import {ConfigService} from "./config.service";
import {it, describe, beforeEach, inject, expect} from "angular2/testing";

describe("ConfigService", () => {

    // THIS IS THE LINE THAT FAILS !!!
    beforeEach(() => {
        //Do some prep
    });
    it("it does a test and evals to true", () => {
        expect(true).toBe(true);
    });
});

What am I doing wrong, how do I get past this error ???
Do I need the reference paths at the top of the spec or is there a better way ?

I assume that this is not your actual code, right? you've commented out the closing brace and parenthesis with your //Do some prep comment — Austin
Edited the above in line with comment, still it does not work !!! — HeavenlyHost

Christopher Currens Christopher Currens · Accepted Answer · 2016-04-28T16:44:46

TypeError: _global.beforeEach is not a function at Object.eval

The error is coming from angular2/testing, you can look at the source to see why. It's trying to import beforeEach from the global object and it doesn't exist. Importing jasmine won't help, because it, when loading in node.js, doesn't alter the global object.

how do I get past this error ???

Well, I would recommend there are a few ways. If you intend to run this code in a web browser, I would recommend testing the code in a browser and not in node.

Follow the (incomplete) guide to testing in the angular2 docs. This involves setting up an html file that you will use to run your tests. This isn't what you want if you plan on automating the test run using gulp
Use this angular2 seed (or another) as a model on how to use Angular2, SystemJs, Jasmine and Karma together. The karma runner defaults to Chrome, but you can change it to PhantomJS if you prefer. This works pretty well, I just did this for an angular1 app last week.

Do I need the reference paths at the top of the spec or is there a better way ?

There has been a better way since Typescript 1.5, and I wholeheartedly recommend it. Add a tsconfig.json file to the root of your project. This, of course, is already done for you in the angular2 seed that I linked above.

angular2/testing beforeEach is not a function

1 Answers