TechQA.

How to setup NativeScript Angular with Karma, karma-typescript, Jasmine, Mocha, Chai

2.2k views Asked by At

I'm trying to configure karma.config.js to run with NativeScript Angular project following the official doc:

https://docs.nativescript.org/angular/tooling/testing

The problem is the tests always failed and always running node_modules/ and platforms/ too but I mentioned them in excludeFiles property.

I created a github repo to reproduce it

I'm using a separated branches to reproduce it with jasmine and mocha

https://github.com/francisrod01/native-script-angular2-karma-demo

Scenario 1: karma-typescript + jasmine

dependencies:

  • nativescript-angular: ~5.3.0
  • nativescript-theme-core: ~1.0.4
  • nativescript-unit-test-runner: ^0.3.4
  • reflect-metadata: ~0.1.8
  • tns-core-modules: ~4.0.0

devDependencies:

  • @types/node: ^10.1.4
  • babel-traverse: 6.26.0
  • babel-types: 6.26.0
  • babylon: 6.18.0
  • jasmine-core: ^3.1.0
  • karma: ^2.0.2
  • karma-jasmine: ^1.1.2
  • karma-nativescript-launcher: ^0.4.0
  • karma-typescript: ^3.0.12
  • lazy: 1.0.11
  • nativescript: ^4.0.2
  • nativescript-dev-typescript: ~0.7.0
  • typescript: ~2.7.2

The karma.conf.js file:

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine', 'karma-typescript'],


    // list of files / patterns to load in the browser
    files: [
      { pattern: 'app/**/*.ts' },
      { pattern: 'app/tests/*.ts' }
    ],


    // list of files to exclude
    exclude: [
      'node_modules',
      'platforms'
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      'app/**/*.ts': ['karma-typescript', 'coverage'],
      'app/tests/*.ts': ['karma-typescript']
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress', 'coverage', 'karma-typescript'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],

    customLaunchers: {
      android: {
        base: 'NS',
        platform: 'android'
      },
      ios: {
        base: 'NS',
        platform: 'ios'
      },
      ios_simulator: {
        base: 'NS',
        platform: 'ios',
        arguments: ['--emulator']
      }
    },

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false
  })
}

Bellow follow the compile error output:

29 05 2018 17:00:32.699:WARN [watcher]: All files matched by "/home/paneladm/my-ns-app/app/tests/*.ts" were excluded or matched by prior matchers.

29 05 2018 17:00:32.965:INFO [compiler.karma-typescript]: Compiling project using Typescript 2.6.2
29 05 2018 17:00:35.600:ERROR [compiler.karma-typescript]: app/utils/file-reader.ts(10,16): error TS2693: 'Promise' only refers to a type, but is being used as a value here.

29 05 2018 17:00:35.601:ERROR [compiler.karma-typescript]: node_modules/@angular/common/src/directives/ng_class.d.ts(48,34): error TS2304: Cannot find name 'Set'.

29 05 2018 17:00:35.601:ERROR [compiler.karma-typescript]: node_modules/@angular/core/src/change_detection/differs/default_iterable_differ.d.ts(12,32): error TS2304: Cannot find name 'Iterable'.

29 05 2018 17:00:35.601:ERROR [compiler.karma-typescript]: node_modules/@angular/core/src/change_detection/differs/default_keyvalue_differ.d.ts(24,16): error TS2304: Cannot find name 'Map'.

29 05 2018 17:00:35.601:ERROR [compiler.karma-typescript]: node_modules/@angular/core/src/change_detection/differs/default_keyvalue_differ.d.ts(32,16): error TS2304: Cannot find name 'Map'.

29 05 2018 17:00:35.601:ERROR [compiler.karma-typescript]: node_modules/@angular/core/src/change_detection/differs/iterable_differs.d.ts(14,48): error TS2304: Cannot find name 'Iterable'.

29 05 2018 17:00:35.602:ERROR [compiler.karma-typescript]: node_modules/@angular/core/src/change_detection/differs/keyvalue_differs.d.ts(22,18): error TS2304: Cannot find name 'Map'.

29 05 2018 17:00:35.602:ERROR [compiler.karma-typescript]: node_modules/@angular/core/src/di/reflective_provider.d.ts(87,123): error TS2304: Cannot find name 'Map'.

29 05 2018 17:00:35.602:ERROR [compiler.karma-typescript]: node_modules/@angular/core/src/di/reflective_provider.d.ts(87,165): error TS2304: Cannot find name 'Map'.

29 05 2018 17:00:35.602:ERROR [compiler.karma-typescript]: node_modules/@angular/platform-browser/src/browser/browser_adapter.d.ts(79,33): error TS2304: Cannot find name 'Map'.

29 05 2018 17:00:35.602:ERROR [compiler.karma-typescript]: node_modules/@angular/platform-browser/src/dom/dom_adapter.d.ts(97,42): error TS2304: Cannot find name 'Map'.

29 05 2018 17:00:35.602:ERROR [compiler.karma-typescript]: node_modules/@angular/platform-browser/src/dom/shared_styles_host.d.ts(11,30): error TS2304: Cannot find name 'Set'.

29 05 2018 17:00:35.602:ERROR [compiler.karma-typescript]: node_modules/@angular/platform-browser/src/dom/shared_styles_host.d.ts(22,30): error TS2304: Cannot find name 'Set'.

29 05 2018 17:00:35.603:ERROR [compiler.karma-typescript]: node_modules/nativescript-angular/dom-adapter.d.ts(79,34): error TS2304: Cannot find name 'Map'.

29 05 2018 17:00:35.603:ERROR [compiler.karma-typescript]: node_modules/nativescript-drop-down/drop-down.d.ts(16,33): error TS2307: Cannot find module 'data/observable-array'.

29 05 2018 17:00:35.603:ERROR [compiler.karma-typescript]: node_modules/nativescript-drop-down/drop-down.d.ts(17,62): error TS2307: Cannot find module 'ui/core/view'.

29 05 2018 17:00:35.603:ERROR [compiler.karma-typescript]: node_modules/nativescript-drop-down/drop-down.d.ts(18,30): error TS2307: Cannot find module 'ui/gestures/gestures'.

29 05 2018 17:00:35.603:ERROR [compiler.karma-typescript]: node_modules/nativescript-drop-down/drop-down.d.ts(19,29): error TS2307: Cannot find module 'ui/list-picker'.

29 05 2018 17:00:35.603:ERROR [compiler.karma-typescript]: node_modules/rxjs/Observable.d.ts(58,60): error TS2693: 'Promise' only refers to a type, but is being used as a value here.

29 05 2018 17:00:35.603:ERROR [compiler.karma-typescript]: node_modules/rxjs/Observable.d.ts(74,59): error TS2693: 'Promise' only refers to a type, but is being used as a value here.

29 05 2018 17:00:35.604:ERROR [compiler.karma-typescript]: node_modules/tns-core-modules/ui/core/view-base/view-base.d.ts(243,24): error TS2304: Cannot find name 'Set'.

29 05 2018 17:00:35.604:ERROR [compiler.karma-typescript]: node_modules/tns-core-modules/ui/core/view-base/view-base.d.ts(244,30): error TS2304: Cannot find name 'Set'.

29 05 2018 17:00:35.604:ERROR [compiler.karma-typescript]: node_modules/tns-core-modules/ui/core/view/view.d.ts(352,17): error TS2304: Cannot find name 'Set'.

29 05 2018 17:00:35.604:ERROR [compiler.karma-typescript]: node_modules/tns-core-modules/ui/core/view/view.d.ts(353,23): error TS2304: Cannot find name 'Set'.

29 05 2018 17:00:35.604:ERROR [compiler.karma-typescript]: node_modules/tns-core-modules/ui/styling/css-selector/css-selector.d.ts(16,18): error TS2304: Cannot find name 'Set'.

29 05 2018 17:00:35.604:ERROR [compiler.karma-typescript]: node_modules/tns-core-modules/ui/styling/css-selector/css-selector.d.ts(17,24): error TS2304: Cannot find name 'Set'.

29 05 2018 17:00:35.604:ERROR [compiler.karma-typescript]: node_modules/tns-core-modules/ui/styling/css-selector/css-selector.d.ts(57,41): error TS2304: Cannot find name 'Map'.

29 05 2018 17:00:35.604:ERROR [compiler.karma-typescript]: node_modules/tns-core-modules/ui/styling/css-selector/css-selector.d.ts(60,18): error TS2304: Cannot find name 'Set'.

29 05 2018 17:00:35.605:ERROR [compiler.karma-typescript]: node_modules/tns-core-modules/ui/styling/css-selector/css-selector.d.ts(61,21): error TS2304: Cannot find name 'Set'.

29 05 2018 17:00:35.708:INFO [compiler.karma-typescript]: Compiled 17 files in 2717 ms.
29 05 2018 17:00:35.723:WARN [karma]: Port 9876 in use
29 05 2018 17:00:35.724:INFO [karma]: Karma v2.0.2 server started at http://0.0.0.0:9877/
29 05 2018 17:00:35.724:INFO [launcher]: Launching browser android with unlimited concurrency
29 05 2018 17:00:35.752:INFO [launcher]: Starting browser NativeScript Unit Test Runner
Copying template files...
⠙ Installing tns-android
⠸ 29 05 2018 17:00:36.854:ERROR [karma]: Error: Unable to resolve module [./src/localize] from [/home/paneladm/my-ns-app/node_modules/nativescript-localize/angular.js]
{
  "basedir": "/home/paneladm/my-ns-app",
  "extensions": [
    ".js",
    ".json",
    ".ts",
    ".tsx"
  ],
  "moduleDirectory": [
    "node_modules"
  ],
  "modules": {
    "assert": "/home/paneladm/my-ns-app/node_modules/assert/assert.js",
    "buffer": "/home/paneladm/my-ns-app/node_modules/buffer/index.js",
    "child_process": "/home/paneladm/my-ns-app/node_modules/karma-typescript/dist/bundler/resolve/empty.js",
    "cluster": "/home/paneladm/my-ns-app/node_modules/karma-typescript/dist/bundler/resolve/empty.js",
    "console": "/home/paneladm/my-ns-app/node_modules/console-browserify/index.js",
    "constants": "/home/paneladm/my-ns-app/node_modules/constants-browserify/constants.json",
    "crypto": "/home/paneladm/my-ns-app/node_modules/crypto-browserify/index.js",
    "dgram": "/home/paneladm/my-ns-app/node_modules/karma-typescript/dist/bundler/resolve/empty.js",
    "dns": "/home/paneladm/my-ns-app/node_modules/karma-typescript/dist/bundler/resolve/empty.js",
    "domain": "/home/paneladm/my-ns-app/node_modules/domain-browser/source/index.js",
    "events": "/home/paneladm/my-ns-app/node_modules/events/events.js",
    "fs": "/home/paneladm/my-ns-app/node_modules/karma-typescript/dist/bundler/resolve/empty.js",
    "http": "/home/paneladm/my-ns-app/node_modules/stream-http/index.js",
    "https": "/home/paneladm/my-ns-app/node_modules/https-browserify/index.js",
    "module": "/home/paneladm/my-ns-app/node_modules/karma-typescript/dist/bundler/resolve/empty.js",
    "net": "/home/paneladm/my-ns-app/node_modules/karma-typescript/dist/bundler/resolve/empty.js",
    "os": "/home/paneladm/my-ns-app/node_modules/os-browserify/browser.js",
    "path": "/home/paneladm/my-ns-app/node_modules/path-browserify/index.js",
    "punycode": "/home/paneladm/my-ns-app/node_modules/punycode/punycode.js",
    "querystring": "/home/paneladm/my-ns-app/node_modules/querystring-es3/index.js",
    "readline": "/home/paneladm/my-ns-app/node_modules/karma-typescript/dist/bundler/resolve/empty.js",
    "repl": "/home/paneladm/my-ns-app/node_modules/karma-typescript/dist/bundler/resolve/empty.js",
    "stream": "/home/paneladm/my-ns-app/node_modules/stream-browserify/index.js",
    "_stream_duplex": "/home/paneladm/my-ns-app/node_modules/readable-stream/duplex.js",
    "_stream_passthrough": "/home/paneladm/my-ns-app/node_modules/readable-stream/passthrough.js",
    "_stream_readable": "/home/paneladm/my-ns-app/node_modules/readable-stream/readable.js",
    "_stream_transform": "/home/paneladm/my-ns-app/node_modules/readable-stream/transform.js",
    "_stream_writable": "/home/paneladm/my-ns-app/node_modules/readable-stream/writable.js",
    "string_decoder": "/home/paneladm/my-ns-app/node_modules/string_decoder/lib/string_decoder.js",
    "sys": "/home/paneladm/my-ns-app/node_modules/util/util.js",
    "timers": "/home/paneladm/my-ns-app/node_modules/timers-browserify/main.js",
    "tls": "/home/paneladm/my-ns-app/node_modules/karma-typescript/dist/bundler/resolve/empty.js",
    "tty": "/home/paneladm/my-ns-app/node_modules/tty-browserify/index.js",
    "url": "/home/paneladm/my-ns-app/node_modules/url/url.js",
    "util": "/home/paneladm/my-ns-app/node_modules/util/util.js",
    "vm": "/home/paneladm/my-ns-app/node_modules/vm-browserify/index.js",
    "zlib": "/home/paneladm/my-ns-app/node_modules/browserify-zlib/lib/index.js",
    "_process": "/home/paneladm/my-ns-app/node_modules/process/browser.js"
  },
  "filename": "",
  "paths": []
}
Error: Cannot find module './src/localize' from '/home/paneladm/my-ns-app/node_modules/nativescript-localize'
    at /home/paneladm/my-ns-app/node_modules/karma-typescript/dist/bundler/resolve/resolver.js:163:27
    at /home/paneladm/my-ns-app/node_modules/browser-resolve/index.js:265:24
    at /home/paneladm/my-ns-app/node_modules/browser-resolve/node_modules/resolve/lib/async.js:55:18
    at load (/home/paneladm/my-ns-app/node_modules/browser-resolve/node_modules/resolve/lib/async.js:69:43)
    at onex (/home/paneladm/my-ns-app/node_modules/browser-resolve/node_modules/resolve/lib/async.js:92:31)
    at /home/paneladm/my-ns-app/node_modules/browser-resolve/node_modules/resolve/lib/async.js:22:47
    at FSReqWrap.oncomplete (fs.js:170:21)
Test run failed.

Scenario 2: Using karma + mocha, chai

Scenario 2: Dependencies version to karma + mocha:

dependencies:

  • nativescript-angular: ~5.3.0
  • nativescript-theme-core: ~1.0.4
  • nativescript-unit-test-runner: ^0.3.4
  • reflect-metadata: ~0.1.8
  • tns-core-modules: ~4.0.0

devDependencies:

  • babel-traverse: 6.26.0
  • babel-types: 6.26.0
  • babylon: 6.18.0
  • chai: ^4.1.2
  • karma: ^2.0.2
  • karma-chai: ^0.1.0
  • karma-mocha: ^1.3.0
  • karma-nativescript-launcher: ^0.4.0
  • lazy: 1.0.11
  • mocha: ^5.2.0
  • nativescript: ^4.0.2
  • nativescript-dev-typescript: ~0.7.0
  • typescript: ~2.7.2

The karma.conf.js file:

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['mocha', 'chai'],


    // list of files / patterns to load in the browser
    files: [
      'app/**/*.js',
    ],


    // list of files to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],

    customLaunchers: {
      android: {
        base: 'NS',
        platform: 'android'
      },
      ios: {
        base: 'NS',
        platform: 'ios'
      },
      ios_simulator: {
        base: 'NS',
        platform: 'ios',
        arguments: ['--emulator']
      }
    },

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false
  })
}

The error on console:

30 05 2018 12:58:56.816:INFO [watcher]: Changed file ".../app/tests/example.js".
Chrome 66.0.3359 (Linux 0.0.0) ERROR
  {
    "message": "An error was thrown in afterAll\nUncaught ReferenceError: exports is not defined

On http://localhost:9876/debug.html the Chrome browser, the Karma DEBUG RUNNER shows it:

Uncaught ReferenceError: exports is not defined
    at app.component.js:2

The app.component.js compiled file:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var AppComponent = /** @class */ (function () {
    function AppComponent() {
    }
    AppComponent = __decorate([
        core_1.Component({
            selector: "ns-app",
            templateUrl: "app.component.html",
        })
    ], AppComponent);
    return AppComponent;
}());
exports.AppComponent = AppComponent;
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXBwLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbImFwcC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7QUFBQSxzQ0FBMEM7QUFPMUM7SUFBQTtJQUE0QixDQUFDO0lBQWhCLFlBQVk7UUFMeEIsZ0JBQVMsQ0FBQztZQUNQLFFBQVEsRUFBRSxRQUFRO1lBQ2xCLFdBQVcsRUFBRSxvQkFBb0I7U0FDcEMsQ0FBQztPQUVXLFlBQVksQ0FBSTtJQUFELG1CQUFDO0NBQUEsQUFBN0IsSUFBNkI7QUFBaEIsb0NBQVkiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogXCJucy1hcHBcIixcbiAgICB0ZW1wbGF0ZVVybDogXCJhcHAuY29tcG9uZW50Lmh0bWxcIixcbn0pXG5cbmV4cG9ydCBjbGFzcyBBcHBDb21wb25lbnQgeyB9XG4iXX0=

References

karma-runner karma-jasmine nativescript-angular karma-typescript
Original Q&A
0

There are 0 answers

Related Questions in KARMA-RUNNER

Related Questions in KARMA-JASMINE

Related Questions in NATIVESCRIPT-ANGULAR

Related Questions in KARMA-TYPESCRIPT

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions