在Angular 2 RC5之后,测试失败了

时间:2016-08-11 11:26:50

标签: testing angular migration

我的测试使用了以下格式:

export function main() {
    describe('Angular2 component test', function() {
         it('should initialize component',
           async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
              var template = '<specific-component-tag>';
                return tcb.overrideTemplate(TestComponent, template)
                .createAsync(TestComponent)
                .then((fixture) => {
                    expect(fixture.componentInstance.viewChild).toBeDefined();
                    fixture.detectChanges();
                    expect(fixture.componentInstance.viewChild.items.length).toBe(1);
                    // .... etc.
                }).catch (reason => {
                    console.log(reason);
                    return Promise.reject(reason);
                });
         })));
      });
}
这在RC4中工作正常。但RC5突然来了,现在这段代码没有用。 它引发了以下错误:

Module ".... @angular/core/testing" has no exported member 'it'.
Module ".... @angular/core/testing" has no exported member 'describe'.
Module ".... @angular/core/testing" has no exported member 'expect'.
Module ".... @angular/core/testing" has no exported member 'beforeEachProviders'.
Module ".... @angular/compiler/testing" has no exported member 'TestComponentBuilder'.
Module ".... @angular/compiler/testing" has no exported member 'ComponentFixture'.

请帮我将此测试迁移到angular2 RC5。

更新: 我已经阅读过RC5 release notes但我没有想到如何实现我的目标。

3 个答案:

答案 0 :(得分:14)

删除了通过@ angular / core / testing提供的Jasmine导入。因此,请删除以下

的导入

在:

import {
  beforeEach,
  beforeEachProviders,
  describe,
  expect,
  it,
  inject,
} from '@angular/core/testing';

/// <reference path="../../../typings/main/ambient/jasmine/index.d.ts" />
import {
  inject, addProviders
} from '@angular/core/testing';

引用路径应该是文件中的第一行,它应该指向jasmine类型定义文件。 (更新相对向上。即../../到任何东西)要获取茉莉花类型定义,请将以下行添加到ambientDevDependencies。我看起来像这样

{
  "ambientDevDependencies": {
    "angular-protractor": "registry:dt/angular-protractor#1.5.0+20160425143459",
    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
    "selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20160317120654"
  },
  "ambientDependencies": {
    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654"
  }
}

同时更改

  beforeEachProviders(() => [InMemoryDataService]);

import { TestBed } from '@angular/core/testing';
...
describe('...', () => {
  TestBed.configureTestingModule({
    providers: [ InMemoryDataService ]
  });
  it(...);
});

答案 1 :(得分:4)

看一下changelog: https://github.com/angular/angular/blob/master/CHANGELOG.md

看起来像您正在使用的API已被弃用 - 路径和名称已更改。 :)

例如:

  • TestComponentBuilder和ComponentFixture现在位于@ angular / core / testing,
  • beforeEachProviders:

代码:

beforeEachProviders(() => [MyService]);

更改为:

beforeEach(() => {
    addProviders([MyService]);
});

答案 2 :(得分:-1)

如果您已阅读发行说明。测试API包有很多变化。

https://github.com/angular/angular/blob/master/CHANGELOG.md#breaking-changes

所以,我还没有尝试将测试迁移到RC5。但是我找到了关于更改新测试API的链接。

https://ng2-info.github.io/2016/08/angular-2-rc-5/#テスティングapiに関する変更

希望得到这个帮助。