'模块不可用'使用打字稿单元测试组件时

时间:2017-06-22 11:28:45

标签: angularjs unit-testing typescript karma-runner

为什么在测试期间找不到模块的想法?

karma.conf.js我已指定files属性下的所有依赖项,即angularangular-mocks

但我觉得app.component.tsmain.ts没有被编译,因此他们为什么不被发现?

karma.conf.js

var webpackConfig = require('./webpack.test.config');

module.exports = function(config) {
  'use strict';
  var _config = {
    basePath: '',
    frameworks: ['jasmine', 'karma-typescript'],
    files: [
      'node_modules/angular/angular.js',
      'node_modules/angular-mocks/angular-mocks.js',
      'src/app/app.component.ts',
      'src/main.ts',
      {
        pattern: 'src/app/**/*.+(ts|html)'
      }
    ],
    preprocessors: {
      '**/*.ts': ['karma-typescript']
    },
    webpack: webpackConfig,
    karmaTypescriptConfig: {
      bundlerOptions: {
        entrypoints: /\.spec\.ts$/
      },
      compilerOptions: {
        lib: ['ES2015', 'DOM']
      }
    },
    reporters: ['progress', 'karma-typescript'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: false,
    browsers: ['Chrome'],
    singleRun: true
  };

  config.set(_config);
};

webpack.test.config.js

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

module.exports = {
  devtool: 'inline-source-map',

  resolve: {
    extensions: ['.ts', '.js']
  },

  module: {
    rules: [{
        test: /\.ts$/,
        loaders: [{
          loader: 'awesome-typescript-loader',
          options: {
            configFileName: path.join(__dirname, 'src', 'tsconfig.json')
          }
        }]
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      }
    ]
  }
};

app.component.spec.ts

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

describe('Component: AppComponent', () => {
  let Users;
  beforeEach(function() {
    angular.mock.module('myapp');
  });
  beforeEach(inject(function(_Users_: any) {
    console.log(_Users_);
  }));
});

app.component.ts

export class AppComponent implements ng.IComponentOptions {
  static registeredName = 'dummy';

  template: any;

  constructor() {
    this.template = require('./app.component.html');
  }
}

main.ts

import { AppComponent } from "./app/app.component";

angular.module("myapp", ['pascalprecht.translate'])
  .component(AppComponent.registeredName, new AppComponent())
  .config(["$translateProvider", function($translateProvider: any) {
    $translateProvider.determinePreferredLanguage();
  }]);

0 个答案:

没有答案