测试Angular 2组件需要深入了解Angular 2 @angular/core/testing模块。 虽然Jasmine的许多功能在Angular的测试模块中使用，但是Angular在测试组件时还需要一些非常具体的包装器和routine。
我们可以相当容易地测试简单Angular 2组件的属性和方法 - 毕竟，Angular 2组件是我们可以创建和接口的简单类。 说我们有一个简单的组件，保持显示一个定义的消息。 消息的内容可以通过setMessage函数改变，而clearMessage函数将会设置一个空消息。 这是一个非常小的组件，但我们将如何测试呢？
message.component.ts
import {Component} from '@angular/core';
@Component({
selector: 'display-message',
template: '<h1>{{message}}</h1>'
})
export class MessageComponent {
public message: string = '';
constructor() {}
setMessage(newMessage: string) {
this.message = newMessage;
}
clearMessage() {
this.message = '';
}
}
现在我们将创建两个单元测试，一个测试setMessage函数以查看是否显示新消息，另一个测试clearMessage函数以查看清除消息是否按预期工作。
message.spec.ts
import {MessageComponent} from './message.component';
describe('Testing message state in message.component', () => {
let app: MessageComponent;
beforeEach(() => {
app = new MessageComponent();
});
it('should set new message', () => {
app.setMessage('Testing');
expect(app.message).toBe('Testing');
});
it('should clear message', () => {
app.clearMessage();
expect(app.message).toBe('');
});
});
我们创建了两个测试：一个用于setMessage，另一个用于clearMessage。 为了调用这些函数，我们必须首先初始化MessageComponent类。 这是通过在执行每个测试之前调用beforeEach函数来实现的。
一旦我们的MessageComponent对象被创建，我们可以调用setMessage和clearMessage并分析这些动作的结果。 我们制定一个预期的结果，然后测试看看我们期望的结果是否是。 这里我们测试我们试图设置的消息是否将MessageComponent属性消息修改为我们想要的值。 如果是，那么测试成功，我们的MessageComponent按预期工作。