Angular Academy · Aula

TestBed e componentes de teste

Configure e crie componentes nos testes.

TestBed e componentes de teste é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.

Por que o TestBed existe

Os componentes Angular dependem do framework: injeção de dependências, detecção de alterações e compilador de modelos. Para testá-los isoladamente, você precisa de um pequeno ambiente Angular. O TestBed é o principal utilitário de testes do Angular e cria esse ambiente para cada teste.

Ele configura um NgModule temporário, compila seu componente e fornece um recurso para interagir com ele.

configureTestingModule

TestBed.configureTestingModule() declara o que seu teste precisa: o componente em teste, seus provedores e quaisquer importações. Para componentes independentes, coloque o próprio componente em imports.

import { TestBed } from '@angular/core/testing';
import { CounterComponent } from './counter.component';

beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [CounterComponent],
  });
});

Criando um ComponentFixture

TestBed.createComponent(CounterComponent) retorna um ComponentFixture. O fixture é seu controle remoto: ele envolve a instância do componente, seu elemento DOM nativo e o mecanismo de detecção de alterações.

import { ComponentFixture, TestBed } from '@angular/core/testing';

let fixture: ComponentFixture<CounterComponent>;

beforeEach(() => {
  fixture = TestBed.createComponent(CounterComponent);
});

Acessando a instância do componente

fixture.componentInstance é a instância real da classe. Você pode chamar seus métodos e ler suas propriedades diretamente, assim como faria em TypeScript normal.

it('creates the component', () => {
  const fixture = TestBed.createComponent(CounterComponent);
  const component = fixture.componentInstance;
  expect(component).toBeTruthy();
  expect(component.count).toBe(0);
});

detectChanges aciona a renderização

Um fixture recém-criado ainda NÃO foi renderizado. Chame fixture.detectChanges() para executar a detecção de alterações e o ngOnInit do componente, vinculando os dados ao DOM.

it('renders initial value', () => {
  const fixture = TestBed.createComponent(CounterComponent);
  fixture.detectChanges(); // now bindings are applied
  const el = fixture.nativeElement as HTMLElement;
  expect(el.textContent).toContain('0');
});

nativeElement versus debugElement

fixture.nativeElement é o nó DOM bruto (um HTMLElement). fixture.debugElement é o wrapper mais completo do Angular, que permite consultar por diretiva, ler serviços injetados e inspecionar vinculações.

const native = fixture.nativeElement;       // HTMLElement
const debug = fixture.debugElement;         // DebugElement
console.log(debug.componentInstance === fixture.componentInstance); // true

Provedores no módulo de testes

Se o componente injetar serviços, forneça-os por meio de providers. Você pode usar serviços reais ou substitutos para teste. Aqui fornecemos um serviço real para um caso simples.

TestBed.configureTestingModule({
  imports: [CounterComponent],
  providers: [
    { provide: LoggerService, useValue: { log: () => {} } },
  ],
});

compileComponents para modelos externos

Ao usar templateUrl/styleUrls não incorporados, sem a configuração de testes do Angular CLI, os modelos precisam ser compilados de forma assíncrona. Chame await TestBed.compileComponents(). Com o CLI, isso geralmente é automático.

beforeEach(async () => {
  await TestBed.configureTestingModule({
    imports: [ProfileComponent],
  }).compileComponents();
});

Um teste mínimo completo

Juntando tudo: configurar, criar, detectar e verificar. Esse é o formato padrão de praticamente todo teste de componente Angular.

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

  beforeEach(() => {
    TestBed.configureTestingModule({ imports: [CounterComponent] });
    fixture = TestBed.createComponent(CounterComponent);
    fixture.detectChanges();
  });

  it('starts at zero', () => {
    expect(fixture.componentInstance.count).toBe(0);
  });
});

TestBed.inject para serviços

Para obter um provedor configurado, use TestBed.inject(Token). Esse é o substituto moderno de TestBed.get(), que foi descontinuado.

const logger = TestBed.inject(LoggerService);
expect(logger).toBeDefined();

Redefinindo entre testes

O TestBed redefine automaticamente seu módulo antes de cada teste, portanto os provedores e o estado do componente não vazam entre eles. É por isso que você deve configurar dentro de beforeEach, em vez de fazer isso uma única vez globalmente.

Verificação rápida

Teste o que acontece imediatamente após createComponent.

Recapitulação

Você aprendeu o núcleo dos testes: TestBed.configureTestingModule() cria o ambiente, createComponent() retorna um ComponentFixture e detectChanges() o renderiza. Use componentInstance para a classe, nativeElement/debugElement para o DOM e TestBed.inject() para os serviços.

Perguntas Frequentes

A aula “TestBed e componentes de teste” é grátis?

Sim — o texto completo de “TestBed e componentes de teste” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.

O que vou aprender em “TestBed e componentes de teste”?

Configure e crie componentes nos testes. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Angular Academy?

Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “TestBed e componentes de teste”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Angular Academy?

Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Angular Academy