Angular CLI example for Jest Preview - the visual debugger for Jest
Tags: angular, jest, opensource, testing
Published: 2022-08-22 11:22:31

---
title: Angular CLI example for Jest Preview - the visual debugger for Jest
published: true
description: I contributed an Angular CLI example for Jest Preview, the visual debugger for component tests using Jest.
tags: angular,jest,opensource,testing
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uqho7uoem2j3lq8ng870.png
# Use a ratio of 100:42 for best results.
---

Recently, I contributed an Angular CLI example for [Jest Preview](https://www.jest-preview.com/) in collaboration with its creator, [Hung Viet Nguyen](https://twitter.com/hung_dev).

## Jest Preview
Jest Preview is a visual debugger for Jest component tests. It runs a preview server and either displays the rendered DOM of a failed test when the [`autoPreview`](https://www.jest-preview.com/docs/api/jestpreviewconfigure/#autopreview-boolean) option is set or the test we explicitly mark for debugging using the [`debug`](https://www.jest-preview.com/docs/api/debug/) function, for example:

```typescript
// 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');
  });
});
```

![Jest Preview displaying the counter component with a count of 0](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7awvwp2j6yjnir2g9sp6.png)

## Angular CLI integration
[The Angular CLI guide for Jest Preview](https://github.com/nvh95/jest-preview/tree/main/examples/angular) refers to the common [installation](https://www.jest-preview.com/docs/getting-started/installation) and [usage](https://www.jest-preview.com/docs/getting-started/usage) instructions while describing Angular-specific configuration and usage instructions.

While there is room for improvement, we documented workarounds in the guide. Jest Preview is not currently able to automatically transform `styleUrls` in component tests, support inline component styles, or automatically import application-wide stylesheets. Because of this, we have to add stylesheet import statements in our tests to match the external stylesheet used by the component-under-test.

For example, say we have this counter component:

```typescript
// 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;
  }
}
```

We would have to add an import statement for `./counter.component.css` in our component test:

```typescript
// 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');
  });
});
```

![Jest Preview displaying the counter component with a count of 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vx4027ibh4p1ycnv3q47.png)