示例

了解最佳实践，或遵循引导示例

Angular 测试库可用于独立组件，也可用于使用模块的 Angular 组件。以下示例展示了如何测试独立组件，但相同原则也适用于使用模块的 Angular 组件。实际上，测试这两种类型的组件的方法应该没有区别，只有设置可能不同。

counter.component.ts
@Component({
  selector: 'app-counter',
  template: `
    <span>{{ hello() }}</span>
    <button (click)="decrement()">-</button>
    <span>Current Count: {{ counter() }}</span>
    <button (click)="increment()">+</button>
  `,
})
export class CounterComponent {
  counter = model(0)
  hello = input('Hi', {alias: 'greeting'})

  increment() {
    this.counter.set(this.counter() + 1)
  }

  decrement() {
    this.counter.set(this.counter() - 1)
  }
}

counter.component.spec.ts
import {render, screen, fireEvent, aliasedInput} from '@testing-library/angular'
import {CounterComponent} from './counter.component'

describe('Counter', () => {
  it('should render counter', async () => {
    await render(CounterComponent, {
      inputs: {
        counter: 5,
        // aliases need to be specified using aliasedInput
        ...aliasedInput('greeting', 'Hello Alias!'),
      },
    })

    expect(screen.getByText('Current Count: 5')).toBeVisible()
    expect(screen.getByText('Hello Alias!')).toBeVisible()
  })

  it('should increment the counter on click', async () => {
    await render(CounterComponent, {inputs: {counter: 5}})

    const incrementButton = screen.getByRole('button', {name: '+'})
    fireEvent.click(incrementButton)

    expect(screen.getByText('Current Count: 6')).toBeVisible()
  })
})

更多示例​

更多示例