mercredi 2 novembre 2016

Karma test error: Uncaught SyntaxError: Unexpected token import

I am developing an Angular2 application and I am currently in a test phase with Karma and Jasmine. I am running 2 basic tests, one working fine, other giving this error:

Uncaught ReferenceError: require is not defined
  at test/routing.spec.es5.js:3

My folder structure is this:

ROOT
 |__ app
 |    |__ app.ts
 |    |__ app.routes.ts
 |    |__ app.module.ts
 |__ i18n
 |    |__ ...
 |__ node_modules
 |    |__ ...
 |__ test
 |    |__ routing.spec.js
 |    |__ basic.spec.js
 |__ index.html
 |__ karma.conf.js
 |__ package.json
 |__ index.html
 |__ webpack.config.js

I have tryied installing Babel as some say, but the same result. Here are my basic files:

package.json

{
  "name": "faas-portal",
  "version": "1.0.0",
  "description": "A blueprint app",
  "scripts": {
    "build": "webpack --inline --colors --progress --display-error-details --display-cached",
    "watch": "npm run build -- --watch",
    "server": "webpack-dev-server --inline --colors --progress --display-error-details --display-cached --port 3000  --content-base",
    "start": "npm run server",
    "test": "karma start",
    "report": "lite-server -c bs-config.report.json"
  },
  "contributors": [
    "Liviu"
  ],
  "license": "MIT",
  "devDependencies": {
    "@types/core-js": "^0.9.32",
    "@types/node": "^6.0.38",
    "angular2-template-loader": "^0.4.0",
    "awesome-typescript-loader": "^1.1.1",
    "css-loader": "^0.23.1",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-jasmine": "^1.0.2",
    "raw-loader": "^0.5.1",
    "to-string-loader": "^1.1.4",
    "typescript": "^2.0.2",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0",
    "webpack-merge": "^0.8.4"
  },
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "^2.0.1",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/platform-server": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "angular2-in-memory-web-api": "0.0.20",
    "angular2-jwt": "^0.1.24",
    "angular2-recaptcha": "^0.3.2",
    "babel-polyfill": "^6.16.0",
    "babel-preset-es2015": "^6.18.0",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "dialog-polyfill": "^0.4.4",
    "ie-shim": "^0.1.0",
    "karma-babel-preprocessor": "^6.0.1",
    "material-design-lite": "^1.2.1",
    "ng2-translate": "^2.5.0",
    "ng2-validators": "^1.5.1",
    "protractor": "^4.0.9",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.26"
  },
  "keywords": [
    "test"
  ],
  "repository": {
    "type": "git",
    "url": "git+http://ift.tt/2fue1XF"
  },
  "bugs": {
    "url": "http://ift.tt/2fbKr5D"
  },
  "homepage": "http://ift.tt/2fu7jBb",
  "main": "webpack.config.js",
  "author": ""
}

webpack.config.js

var webpack = require('webpack');
var path = require('path');


// Webpack Config

var webpackConfig = {
  entry: {
    'polyfills': './polyfills.browser.ts',
    'vendor':    './vendor.browser.ts',
    'main':       './main.browser.ts',
  },

  output: {
    path: './dist',
  },

  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(true),
    new webpack.optimize.CommonsChunkPlugin({ name: ['main', 'vendor', 'polyfills'], minChunks: Infinity }),
  ],

  module: {
    loaders: [
      // .ts files for TypeScript
      { test: /\.ts$/, loaders: ['awesome-typescript-loader', 'angular2-template-loader'] },
      { test: /\.css$/, loaders: ['to-string-loader', 'css-loader'] },
      { test: /\.html$/, loader: 'raw-loader' }
    ]
  }

};


// Our Webpack Defaults
var defaultConfig = {
  devtool: 'cheap-module-source-map',
  cache: true,
  debug: true,
  output: {
    filename: '[name].bundle.js',
    sourceMapFilename: '[name].map',
    chunkFilename: '[id].chunk.js'
  },

  resolve: {
    //root: [ path.join(__dirname, 'src') ],
    root: [ __dirname ],
    extensions: ['', '.ts', '.js']//,
    //alias : {
    //    module : path.join(__dirname, 'node_modules')
    //  }
    },  
  devServer: {
    historyApiFallback: true,
    watchOptions: { aggregateTimeout: 300, poll: 1000 }
  },

  node: {
    global: 1,
    crypto: 'empty',
    module: 0,
    Buffer: 0,
    clearImmediate: 0,
    setImmediate: 0
  }
};

var webpackMerge = require('webpack-merge');
module.exports = webpackMerge(defaultConfig, webpackConfig);

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "outDir": "dist",
    "rootDir": ".",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
     "types": [
       "core-js",
       "node"
     ]
  },
  "exclude": [
    "node_modules"
  ],
  "awesomeTypescriptLoaderOptions": {
    "useWebpackText": true
  },
  "compileOnSave": false,
  "buildOnSave": false,
  "atom": { "rewriteTsconfig": false }
}

karma.conf.js

// Karma configuration
// Generated on Tue Nov 01 2016 14:55:46 GMT+0200 (GTB Standard Time)

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: http://ift.tt/1ft83uu
    frameworks: ['jasmine'],


    // list of files / patterns to load in the browser
    files: [
      // RxJs.
      { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
      { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },

      // paths loaded via module imports
      // Angular itself
      { pattern: 'node_modules/@angular/**/*.js', included: false, watched: true },
      { pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false },

      'node_modules/babel-polyfill/dist/polyfill.js',

      './test/basic.spec.js',
      './test/routing.spec.js'
    ],


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

    plugins: [
     'karma-jasmine',
     'karma-chrome-launcher',
     'karma-babel-preprocessor'
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: http://ift.tt/1gyw6MG

    preprocessors: {
      //'src/**/*.js': ['babel'],
      'test/*.js': ['babel']
    },
    babelPreprocessor: {
      options: {
        presets: ['es2015'],
        sourceMap: 'inline'
      },
      filename: function (file) {
        return file.originalPath.replace(/\.js$/, '.es5.js');
      },
      sourceFileName: function (file) {
        return file.originalPath;
      }
    },



    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: http://ift.tt/1ft83KQ
    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: http://ift.tt/1ft83KU
    browsers: ['Chrome'],


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

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

app.ts

import {Component, OnInit} from '@angular/core';
import {TranslateService} from 'ng2-translate/ng2-translate';
import {Router} from '@angular/router';

import {AccountService} from  './account/account-service';

@Component({
  selector   : 'app',
  styleUrls: ['./app.css'],
  templateUrl: './app.html',
  providers : [AccountService]
})
export class AppComponent implements OnInit{

  private hello: string = 'Hello';

  goHome(){
    this.router.navigate(['./home']);
  }

  constructor(private translate: TranslateService, private router: Router, public accountService: AccountService) {
    translate.addLangs(["English", "Deutsch"]);
    translate.setDefaultLang('English');

    // if you want to use the language of the browser...
    //let browserLang = translate.getBrowserLang(); 
    //translate.use(browserLang.match(/en|de/) ? browserLang : 'en');
    translate.use('English');
  }

  ngOnInit() {
   // some functionality
  }

}

routing.spec.js

import {AppComponent} from './app/app';

describe('App', () => {

  beforeEach(function() {
    this.app = new AppComponent();
  });

  it('should have hello property', function() {
    expect(this.app.hello).toBe('Hello');
  });

});

Any help will be highly appreciated. Thank you!

Aucun commentaire:

Enregistrer un commentaire