单元测试 Angular 2 组件时，内置管道会导致失败答案

【问题标题】：Inbuilt pipes cause failures when unit testing Angular 2 component单元测试 Angular 2 组件时，内置管道会导致失败
【发布时间】：2017-02-06 16:02:53
【问题描述】：

我有想要测试的示例组件。当我使用自定义管道（例如我的自定义管道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 并将其添加到声明数组中，但会导致错误

类型 DecimalPipe 是 2 个模块声明的一部分： CommonModule 和 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);

};

【问题讨论】：

标签： javascript unit-testing angular angular-pipe

【解决方案1】：

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

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

将可声明的类（组件、指令和管道）添加到声明列表。

这些类必须在一个模块中声明 应用。如果它们属于此，则在此模块中声明它们模块。

所以你应该导入 CommonModule 而不是将 DecimalPipe 推送到声明数组：

TestBed.configureTestingModule({
       imports: [CommonModule],

【讨论】：

感谢您的回答，但导入 CommonModule 没有帮助，再次测试失败
您是否从declarations 数组中删除了DecimalPipe？
是的，TestBed .configureTestingModule({ imports: [CommonModule], declarations: [TestComp] })
你能在我的 plunker 中重现它吗？ plnkr.co/edit/zobNKEmT6mnag7dBfewi?p=preview
谢谢，即使没有 CommonModule 导入，它在您的 plunker 中也可以正常工作，但在我的项目中仍然无法正常工作，我猜我的 karma 配置文件有问题

【解决方案2】：

我找到了解决方案。在 PhantomJS 浏览器上测试失败，但在 Chrome 上有效。对于 angular-cli 生成的项目，同样的问题是可重现的。

为了让 Angular 2 内置管道的测试在 PhantomJS 上运行，应该添加 2 行代码

karma.shim.js 如果您使用的是 generator-ng2-webpack。

require('intl');
require('intl/locale-data/jsonp/en');

或到

src/polyfills.ts 在您使用 angular-cli 的情况下。

import 'intl';
import 'intl/locale-data/jsonp/en';

【讨论】：