Karma + Webpack测试意外令牌' /'

时间:2016-10-22 09:41:17

标签: javascript angularjs webpack karma-mocha

我试图设置我的角度测试, 但我不断收到以下错误:

PhantomJS 2.1.1 (Windows 8 0.0.0) ERROR
  SyntaxError: Unexpected token '/'
  at app/components/dropdown/dropdown.spec.ts:1

PhantomJS 2.1.1 (Windows 8 0.0.0) ERROR
  SyntaxError: Unexpected token '/'
  at app/components/dropdown/dropdown.spec.ts:1

但我不知道可能出现的问题,这些是我的文件:

karma.conf.js

var WebpackConfig = require('./webpack.config.js');

// Karma configuration
// Generated on Wed Dec 30 2015 11:13:38 GMT-0500 (EST)

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

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

        files: [
            'app/**/*.spec.ts'
        ],


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


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


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


        // 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: ['PhantomJS'],


        // 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,

        preprocessors: {
            'app/**/*.spec.ts': ['webpack']
        },

        webpack: WebpackConfig,

        webpackMiddleware: {
            noInfo: true
        },

        plugins: [
            require('karma-mocha'),
            require('karma-chai'),
            require('karma-phantomjs-launcher'),
            require('karma-webpack')
        ]
    });
};

webpack.config.js

var Loaders = require('./webpack/loaders');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        'bundle': 'app/core/bootstrap.ts'
    },
    output: {
        path: 'public',
        library: '[name]',
        filename: '[name].js'
    },
    resolve: {
        root: __dirname,
        extensions: ['', '.ts', '.js', '.json']
    },
    resolveLoader: {
        modulesDirectories: ['node_modules']
    },
    devtool: 'source-map',
    plugins: [
        new HtmlWebpackPlugin({
            template: 'app/index.html',
            inject: 'body',
            hash: true
        })
    ],
    module: {
        loaders: Loaders
    }
};

只有一个测试: 的 dropdown.spec.ts

import '../../core/tests.ts';
import {chai} from '../../core/tests.ts';

var expect = chai.expect;

describe('Unit tests for DropDown component', () => {

    describe('2 + 4', () => {

        it('should be 6', (done) => {
            expect(2 + 4).to.equal(6);
            done();
        }); 

        it('should not be 7', (done) => {
            expect(2 + 4).to.not.equals(7);
            done();
        });

        it('should be 10', (done) => {
            expect(6 + 4).to.equal(10);
            done();
        });
    });

});

tests.ts

require('../../node_modules/mocha/mocha.js');
export var chai = require('../../node_modules/chai/chai.js');

的package.json

{
  "name": "proj",
  "version": "0.0.1-beta2",
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "angular-mocks": "^1.5.3",
    "autoprefixer": "^6.3.3",
    "bootstrap-loader": "^1.2.1",
    "browser-sync": "^2.17.5",
    "browser-sync-webpack-plugin": "^1.1.3",
    "chai": "^3.5.0",
    "constants": "0.0.2",
    "css-loader": "^0.25.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "gulp": "^3.9.0",
    "gulp-connect": "^5.0.0",
    "gulp-ngdocs": "^0.3.0",
    "html-webpack-plugin": "^2.24.0",
    "html-webpack-template": "^5.4.1",
    "imports-loader": "^0.6.5",
    "karma": "^1.3.0",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-coverage": "^1.1.1",
    "karma-mocha": "^1.1.1",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^1.8.0",
    "mocha": "^3.1.2",
    "ng-annotate-webpack-plugin": "^0.1.2",
    "node-sass": "^3.4.2",
    "phantomjs": "^2.1.7",
    "postcss-loader": "^1.0.0",
    "protractor": "^4.0.9",
    "raw-loader": "^0.5.1",
    "resolve-url-loader": "^1.4.3",
    "rimraf": "^2.5.0",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.0",
    "ts-loader": "^0.9.5",
    "tslint": "^3.2.1",
    "tslint-loader": "^2.1.0",
    "typescript": "1.8.10",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.2",
    "webpack-config": "^6.2.0",
    "webpack-dev-server": "^1.14.0",
    "webpack-stream": "^3.1.0"
  },
  "dependencies": {
    "angular": "^1.5.8",
    "angular-ui-router": "^0.3.1",
    "socket.io-client": "^1.5.0"
  },
  "optionalDependencies": {
    "fsevents": "1.0.14"
  }
}

1 个答案:

答案 0 :(得分:0)

如果在webpack.config.js中使用parametr“library”,则会为您的全局变量指定一个由文件路径和文件名组成的名称。如果您在真实浏览器中打开控制台,则可以看到: enter image description here

更改你的karma.config.js:

var WebpackConfig = require('./webpack.config.js');
WebpackConfig.output.library = false;