Vitest in Angular with NX

Vitest for unit and component testing in Angular using NX

Harnessing the Power of Vitest in Angular and NX

With the latest versions of NX offering Vitest as a testing option, Angular developers have a fresh, powerful tool at their disposal. The introduction of Vitest is more than just a passing trend; it’s a game-changer that addresses many pain points experienced with existing testing solutions. Let’s dive into why Vitest is such a great addition and how it can easen your testing approach with Angular projects.

What Makes Vitest Stand Out?

In the evolving world of testing frameworks, Vitest has quickly gained traction. It shines in areas where developers often face hurdles with Jest, particularly around speed, ease of setup, and maintenance. Here’s why you should consider using Vitest for your Angular projects.

Speed and Performance

Vitest is designed to offer blazing-fast performance. Its ability to run tests significantly faster than Jest is due to its multiple isolation modes and ESM support. In various benchmarks, Vitest demonstrates superior performance in both cold and warm starts, providing immediate feedback and encouraging more frequent test runs.

// A sample Vitest test in Angular
import { test, expect } from "vitest";

test("simple addition", () => {
  expect(1 + 1).toBe(2);
});

Effortless Setup

One of the most appealing aspects of Vitest is its ease of setup, especially for projects already using Vite. Vitest seamlessly integrates with your existing configuration, eliminating the hassles of complex setups that are often required with Jest. This streamlined approach not only saves time but also reduces the likelihood of configuration errors.

// vitest.config.js example
import { defineConfig } from "vite";
import angular from "@vitejs/plugin-angular";

export default defineConfig({
  plugins: [angular()],
  test: {
    // Vitest configuration here
  },
});

Enhanced Developer Experience

Vitest is packed with features that enhance the developer experience:

• ESM Compatibility: No need to transform ESM to CommonJS, which streamlines the testing process and avoids common errors encountered with Jest.
• Versatile Isolation Modes: With options like VM, Threads, Forks, and No Isolate, Vitest allows developers to balance between performance and isolation as needed.
• UI Mode: Offers a visual test interface that includes execution time, code coverage, and a module graph illustrating dependencies.
• Advanced Assertions: Offers powerful methods like expect.soft, expect.poll, and fixtures that broaden the testing capabilities.

Component Testing in the Browser

Vitest’s experimental browser mode enables real browser testing, allowing for more accurate component tests within the actual browser environment. This is great, since tools like Playwright isn’t supporting this for Angular just yet.

// Angular component test in Vitest
import { ComponentFixture, TestBed } from "@angular/core/testing";
import { MyComponent } from "./my-component.component";

test("renders message", async () => {
  await TestBed.configureTestingModule({
    declarations: [MyComponent],
  }).compileComponents();

  const fixture: ComponentFixture<MyComponent> =
    TestBed.createComponent(MyComponent);
  fixture.detectChanges();

  const compiled = fixture.nativeElement;
  expect(compiled.querySelector("p").textContent).toContain("Hello Vitest");
});

Angular Testing Library Integration

An exciting feature of using Vitest with Angular is its compatibility with the Angular Testing Library (ATL). This library works seamlessly with Vitest, offering utilities for testing Angular components in a way that encourages good testing practices. ATL works well with Vitest’s rapid testing cycles, enhancing test reliability and maintainability without being intrusive.

// Using Angular Testing Library with Vitest
import { render, screen } from "@testing-library/angular";
import { MyComponent } from "./my-component.component";

test("it renders the component", async () => {
  await render(MyComponent, {
    componentProperties: { text: "Hello Vitest!" },
  });

  expect(screen.getByText("Hello Vitest!")).toBeTruthy();
});

More information

You can read more about Vitest here. Also, if you want to migrate your existing Jest tests to Vitest, you can read more about that here.

Conclusion

Embracing Vitest in your Angular and NX projects is more than just adopting a new tool—it’s about enhancing your overall development workflow. It’s faster, easier to configure, and offers a better developer experience with its rich feature set. While Jest remains a reliable and mature option, the innovative capabilities of Vitest ensure it stands out as a compelling alternative.

As software architects and developers, making the switch to Vitest means aligning with modern technologies that provide speed and flexibility, fostering a more productive and enjoyable testing phase. Don’t miss out on the advantages Vitest brings to the table—your Angular projects deserve it!