Angular Academy · Урок

TestBed и приспособления компонентов

Настраивайте и создавайте компоненты в тестах

«TestBed и приспособления компонентов» — бесплатный урок Angular Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

Зачем нужен TestBed

Компоненты Angular зависят от возможностей платформы: внедрения зависимостей, обнаружения изменений и компилятора шаблонов. Чтобы проверять их изолированно, нужна небольшая среда Angular. TestBed — основной инструмент тестирования Angular, который создаёт такую среду для каждого теста.

Он настраивает временный NgModule, компилирует компонент и предоставляет объект для взаимодействия с ним.

configureTestingModule

TestBed.configureTestingModule() объявляет всё необходимое тесту: проверяемый компонент, его поставщиков и любые импорты. Для автономных компонентов сам компонент помещают в imports.

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

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

Создание ComponentFixture

TestBed.createComponent(CounterComponent) возвращает объект ComponentFixture. Это ваш пульт управления: он оборачивает экземпляр компонента, его собственный элемент DOM и механизм обнаружения изменений.

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

let fixture: ComponentFixture<CounterComponent>;

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

Доступ к экземпляру компонента

fixture.componentInstance — фактический экземпляр класса. Вы можете напрямую вызывать его методы и читать свойства, как в обычном TypeScript.

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

detectChanges запускает отображение

Недавно созданный объект fixture ещё не отображён. Вызовите fixture.detectChanges(), чтобы запустить обнаружение изменений и ngOnInit компонента, связав данные с 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 и debugElement

fixture.nativeElement — это исходный узел DOM (элемент HTMLElement). fixture.debugElement — более функциональная оболочка Angular, позволяющая выполнять поиск по директиве, читать внедрённые службы и проверять привязки.

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

Поставщики в модуле тестирования

Если компонент внедряет службы, передайте их через providers. Можно использовать реальные службы или тестовые замены. Здесь для простого случая мы предоставим реальную службу.

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

compileComponents для внешних шаблонов

При использовании внешних templateUrl/styleUrls без настройки тестов Angular CLI шаблоны нужно компилировать асинхронно. Вызовите await TestBed.compileComponents(). При использовании CLI это обычно происходит автоматически.

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

Полный минимальный тест

Объединим всё: настроим, создадим, запустим обнаружение изменений и проверим результат. Так обычно выглядит почти каждый тест компонента 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 для служб

Чтобы получить настроенного поставщика, используйте TestBed.inject(Token). Это современная замена устаревшему TestBed.get().

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

Сброс между тестами

TestBed автоматически сбрасывает свой модуль перед каждым тестом, поэтому поставщики и состояние компонента не переносятся между тестами. Поэтому настройку выполняют внутри beforeEach, а не один раз глобально.

Быстрая проверка

Проверьте, что происходит сразу после createComponent.

Итоги

Вы изучили основу тестирования: TestBed.configureTestingModule() создаёт среду, createComponent() возвращает ComponentFixture, а detectChanges() отображает его. Используйте componentInstance для работы с классом, nativeElement/debugElement для доступа к DOM и TestBed.inject() для получения служб.

Часто задаваемые вопросы

Урок «TestBed и приспособления компонентов» бесплатный?

Да — полный текст урока «TestBed и приспособления компонентов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «TestBed и приспособления компонентов»?

Настраивайте и создавайте компоненты в тестах Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «TestBed и приспособления компонентов»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

TestBed и приспособления компонентов
Тестирование входных данных, выходных данных и DOM
Имитация сервисов и зависимостей
Тестирование сигналов и асинхронного кода

← Назад к Angular Academy