Пример Angular CLI для Jest Preview — визуального отладчика для Jest

Недавно я написал пример Angular CLI для Jest Preview в сотрудничестве с его создателем, Хунг Вьет Нгуеном.

Jest Preview

Jest Preview — это визуальный отладчик для тестов компонентов Jest. Он запускает сервер предварительного просмотра и отображает либо рендеринг DOM неудачного теста, если установлена опция autoPreview, либо тест, который мы явно помечаем для отладки, например, с помощью функции debug:

// counter.component.spec.ts
import { render, screen } from '@testing-library/angular';
import userEvent from '@testing-library/user-event';
import preview from 'jest-preview';
import { CounterComponent } from './counter.component';
import './counter.component.css'; 

describe(CounterComponent.name, () => {
  it('initially has a zero count', async () => {
    const user = userEvent.setup();
    await render(CounterComponent);

    // Open http://localhost:3336 to see preview
    // Require to run `jest-preview` server before
    preview.debug(); // 👈

    expect(await screen.findByTestId('count')).toContainHTML('0');
  });
});

Вход в полноэкранный режим Выход из полноэкранного режима

Интеграция Angular CLI

Руководство по Angular CLI для Jest Preview ссылается на общие инструкции по установке и использованию, описывая при этом специфические для Angular инструкции по настройке и использованию.

Хотя есть возможности для улучшения, мы задокументировали обходные пути в руководстве. В настоящее время Jest Preview не может автоматически преобразовывать styleUrls в тестах компонентов, поддерживать встроенные стили компонентов или автоматически импортировать таблицы стилей для всего приложения. Из-за этого нам приходится добавлять операторы импорта таблиц стилей в наши тесты, чтобы соответствовать внешней таблице стилей, используемой тестируемым компонентом.

Например, у нас есть компонент счетчика:

// counter.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-counter',
  standalone: true,
  styleUrls: ['./counter.component.css'], // 👈
  template: `
    <button type="button" (click)="onCount()">
      The count is:
      <div data-testid="count">{{ count }}</div>
    </button>
  `,
})
export class CounterComponent {
  count = 0;

  onCount(): void {
    this.count += 1;
  }
}

Вход в полноэкранный режим Выход из полноэкранного режима

Мы должны добавить оператор импорта для ./counter.component.css в наш тест компонента:

// counter.component.spec.ts
import { render, screen } from '@testing-library/angular';
import userEvent from '@testing-library/user-event';
import preview from 'jest-preview';
import { CounterComponent } from './counter.component';
import './counter.component.css'; // 👈

describe(CounterComponent.name, () => {
  it('displays multiple counts', async () => {
    const user = userEvent.setup();
    await render(CounterComponent);

    await user.click(await screen.findByRole('button'));
    await user.click(await screen.findByRole('button'));

    // Open http://localhost:3336 to see preview
    // Require to run `jest-preview` server before
    preview.debug();

    expect(await screen.findByTestId('count')).toContainHTML('2');
  });
});

Вход в полноэкранный режим Выход из полноэкранного режима