javascript - 对 Angular 2 组件进行单元测试时，内置管道会导致失败

Question

我有想要测试的示例组件。当我使用自定义管道(例如我的自定义管道 concat)时，它工作正常。

import { ConcatPipe } from 'path-to-concat-pipe';

@Component({
  selector: 'test',
  template: '{{ testProp | concat }}'
})
class TestComp {
  public testProp: Array = [2017, 2018];
}

但是当我尝试使用inbuilt pipe时(例如 number)，我的测试失败，没有任何信息性错误消息。

@Component({
  selector: 'test',
  template: '{{ testProp | number }}'
})
class TestComp {
  public testProp: number = 2017;
}

示例规范代码

describe('TestComp', () => {
    let comp: TestComp;
  let fixture: ComponentFixture<TestComp>;

  beforeEach(async(() => {
    TestBed
    .configureTestingModule({
      declarations: [TestComp, ConcatPipe],

    })
    .compileComponents()
    .then(() => {
          fixture = TestBed.createComponent(TestComp);        
          fixture.detectChanges();
    })
    }));

  it('TestComp successfully initialized', () => {
    expect(fixture.componentInstance).toBeDefined()
  });
});

此外，我尝试从“@angular/common”导入 DecimalPipe 并将其添加到声明数组中，但它导致错误

Type DecimalPipe is part of the declarations of 2 modules: CommonModule and DynamicTestModule!

我正在使用 Angular 2.0 发行版本。

UPD

测试在 plunker 中运行良好@yurzui 提供了，但在我的项目中失败了。我猜问题可能与我的业力配置文件有关

karma.shim.js

'use strict';

Error.stackTraceLimit = Infinity;
require('es6-shim');
require('reflect-metadata');
require('zone.js/dist/zone');;
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');
require('zone.js/dist/sync-test');
require('zone.js/dist/proxy');
require('zone.js/dist/jasmine-patch');
require('@angular/core/testing');

var appContext = require.context('./src', true, /root.spec.ts/);

var testing = require('@angular/core/testing');
var browser = require('@angular/platform-browser-dynamic/testing');



testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());

karma.conf.js

'use strict';

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

module.exports = function (config) {
    var _config = {
        basePath: '',

        frameworks: ['jasmine'],

        files: [
            {pattern: './karma-shim.js', watched: false},
            {pattern: './src/app/**/*spec.ts', watched: true, included: false}
        ],

        exclude: [],

        preprocessors: {
            './karma-shim.js': ['webpack', 'sourcemap']
        },

        webpack: webpackConfig,

        webpackMiddleware: {
            stats: 'errors-only'
        },

        coverageReporter: {
            dir: 'coverage/',
            reporters: [
                {type: 'text-summary'},
                {type: 'html'}
            ]
        },

        browserNoActivityTimeout : 100000,

        webpackServer: {
            noInfo: true
        },

        reporters: ['story', 'coverage', 'progress'],

        port: 9876,

        colors: true,

        logLevel: config.LOG_DEBUG,

        autoWatch: false,

        browsers: ['PhantomJS'], 

        singleRun: true,
    };

    config.set(_config);

};

Answer 1

根据文档https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html#!#q-what-to-declare

我应该在声明中添加哪些类？

Add declarable classes — components, directives, and pipes — to a declarations list.

These classes must be declared in exactly one module of the application. Declare them in this module if they belong to this module.

因此，您应该导入 CommonModule 而不是将 DecimalPipe 推送到声明数组:

TestBed.configureTestingModule({
       imports: [CommonModule],