Error 'cannot find name ...' using karma-typescript-preprocessor plugin

[loulouDelPays]

Hi,

I am trying to automate unit test execution using grunt karma and karma-typescript-preprocessor.

However, when I run 'grunt watch', karma outputs the following error :
ERROR [preprocessor.typescript]: /home/loic/Code/appName/src/app/app.spec.ts.ktp.ts(15,13): error TS2304: Cannot find name 'expect'.

This error happens with a lot of names : 'describe, angular, expect 'etc

The strange thing is that when i run the command line 'tsc /path/to/app.spec.ts', the new js file is created, there is no error.

below my karma.conf.js :

module.exports = function ( karma ) {
    karma.set({
        /**
         * From where to look for files, starting with the location of this file.
         */
        basePath: '../',

        typescriptPreprocessor: {
            // options passed to the typescript compiler
            options: {
                sourceMap: false, // (optional) Generates corresponding .map file.
                target: 'ES5', // (optional) Specify ECMAScript target version: 'ES3' (default), or 'ES5'
                module: 'amd', // (optional) Specify module code generation: 'commonjs' or 'amd'
                noImplicitAny: false, // (optional) Warn on expressions and declarations with an implied 'any' type.
                noResolve: true, // (optional) Skip resolution and preprocessing.
                removeComments: true // (optional) Do not emit comments to output.
            },
            // transforming the filenames
            transformPath: function(path) {
                return path.replace(/\.ts$/, '.js');
            }
        },

        /**
         * This is the list of file patterns to load into the browser during testing.
         */
        files: [
        <% scripts.forEach( function ( file ) { %>'<%= file %>',
            <% }); %>
    'src/**/*.ts'
    ],
    exclude: [
        'src/assets/**/*.ts',
        'src/typeScript/**/*.ts'
    ],
        frameworks: [ 'jasmine' ],
        plugins: [ 'karma-jasmine', 'karma-firefox-launcher', 'karma-typescript-preprocessor' ],
        preprocessors: {
        '**/*.ts': 'typescript'
    },

    /**
     * How to report, by default.
     */
    reporters: 'dots',

    /**
     * On which port should the browser connect, on which port is the test runner
     * operating, and what is the URL path for the browser to use.
     */
        port: 9018,
        runnerPort: 9100,
        urlRoot: '/',

    /**
     * Disable file watching by default.
     */
        autoWatch: false,

    /**
     * The list of browsers to launch to test on. This includes only "Firefox" by
     * default, but other browser names include:
     * Chrome, ChromeCanary, Firefox, Opera, Safari, PhantomJS
     *
     * Note that you can also use the executable name of the browser, like "chromium"
     * or "firefox", but that these vary based on your operating system.
     *
     * You may also leave this blank and manually navigate your browser to
     * http://localhost:9018/ when you're running tests. The window/tab can be left
     * open and the tests will automatically occur there during the build. This has
     * the aesthetic advantage of not launching a browser every time you save.
     */
        browsers: [
        'Firefox'
    ]
});
};

Any help would be appreciated

[niemyjski]

+1

[altschuler]

+1 I have the same issue. I added typings: [ 'typings/tsd.d.ts' ] to typescriptPreprocessor but it didn't seem to help.

[gonzofish]

Just a question to everyone on this thread...does your definitions file have jasmine specified as dependency?

[altschuler]

In my case yes: /// <reference path="jasmine/jasmine.d.ts" />

[gonzofish]

Hmmm...I had the typings in the head of my files too and never got that error. Couldn't get the preprocessor to work nicely for me when using modules (switched to using Webpack + awesome-typescript-loader).

[altschuler]

That'd probably work, but I'd rather fix it altogether then. Might take a look at some point. Thanks though :)

[juancarlosqr]

Hi, i was getting a similar problem but with my own classes. Two important things to comment here:
First, inside the 'typescriptPreprocessor' directive on the karma config file (mostly is karma.conf.js), it should be a 'typings' directive, and you could add a pattern that loads the definitions files, maybe inside of a 'typings' folder, something like this:

typings: [
    'spec/typings/**/*.d.ts'
],

Next, you could download the definition files of more than a thousand of libraries from https://github.com/borisyankov/DefinitelyTyped or maybe better, you should read about TSD: http://webstackoflove.com/use-typescript-definition-manager-for-adding-type-definitions-to-your-project/

With those two things, the half of the problems should be gone

The second, and most important, for your own code, classes or files, the thing is this
In your spec file, you should add a reference to the code your are testing, something like this:

/// <reference path="../src/Person.ts"/>

BUT for this to make it to work, you must change the DEFAULT value of the 'noResolve' directive to false on the 'typescriptPreprocessor' directive (karma.conf.js), or otherwise the preprocessor.typescript will keep logging errors. I waste a lot of time, figuring this out :(

@sergeyt Could you change this behavior on upcoming releases and set the default value to false? so others dont face the same issue. I mean, this is a great tool (great work!), and some people opt to differents solutions like @gonzofish went with webpack or in here http://stackoverflow.com/questions/29912082/error-cannot-find-name-using-karma-typescript-preprocessor-plugin with gulp

Thanks!

[tonyeung]

I use mocha and the errors went away after:

1. I added the mocha.d.ts file
2. included at the beginning of the list of files that get processed by tsc

[sergeyt]

using typings option or including explicit references on type definitions should help to deal with this issue