使用 Angular 和 Vitest 实现更快的测试 ⚡️

在 Angular 生态系统中，有一些推荐的工具用于运行单元测试，包括 Karma、Jasmine 和 Jest。Karma 和 Jasmine 一直是 Angular 项目开箱即用的推荐工具，而Jest的官方支持也正在开发中。

除了上述工具之外，一种名为Vitest 的全新测试框架也应运而生。Vitest 基于Vite构建，并拥有许多令人兴奋的新功能，旨在持续提升开发者编写测试的整体体验。本文将向您展示如何在现有的 Angular 项目中配置 Vitest。

Vitest 功能

Vitest 拥有许多现代化的测试功能，可以带来极佳的测试体验。

• 兼容 Jest 的 API
• 快速地
• ESM 就绪
• 开箱即用的 TypeScript 支持
• 模拟
• 快照测试
• 还有更多……

请查看功能页面以了解完整列表。

虽然 Jest 对 ESM 提供了实验性支持，但这并非一项原生功能，需要一些变通方法才能正确使用。Tomas Trajan 撰写了一篇非常详细的博文，介绍了所有让 Jest 和 ESM 在 Angular 测试中协同工作的场景。

在 Node 环境中运行测试的设置

由于 Vitest 构建于 Vite 之上，因此可以通过插件实现对 Web 框架的支持。AnalogJS提供了一个 Vite 插件，使用户能够将 Vitest 与任何 Angular 应用程序配合使用。

将 Vitest 与现有的 Angular 项目集成只需几个步骤即可完成。

首先，安装@analogjs/platform软件包。

npm install @analogjs/platform --save-dev

接下来，使用项目名称运行该命令：

ng g @analogjs/platform:setup-vitest --project [your-project-name]

Angular CLI 和Nx工作区均支持此功能。

这样可以自动完成以下几个步骤：

• 安装使用 Vitest 运行测试所需的软件包。
• vite.config.mts向项目中添加一个文件以配置 Vitest。
• 向项目中添加一个src/test-setup.ts文件，用于设置测试环境。
• 更新test目标配置以用作@analogjs/vitest-angular:test构建器。
• tsconfig.spec.json使用适当的target设置进行更新files。

您也可以在文档中查看手动安装步骤。

命令执行完毕后，您就可以像以前一样运行测试ng test，但现在使用的是 Vitest 作为测试框架。

ng test

Vitest 默认在 Node 环境中运行测试，并使用模拟浏览器 API jsdom。如果您已经在使用 Jest 特有的测试 API，则可以轻松地将大部分 API迁移到 Vitest。

快照测试

Vitest 也支持使用该toMatchSnapshot()方法进行快照测试。

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

import { MyComponent } from './my.component';

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

  it('should match the snapshot', () => {
    const fixture = TestBed.createComponent(MyComponent);

    expect(fixture).toMatchSnapshot();
  });
});

在浏览器中运行测试的设置

如果您更喜欢在浏览器中运行测试，Vitest 也支持浏览器测试。

首先，按照在节点环境下运行测试的步骤进行操作。

然后，安装运行浏览器中测试所需的软件包：

npm install @vitest/browser playwright --save-dev

更新 vite.config.ts 中的测试对象。

• 移除环境变量：'jsdom' 属性。
• 为 Vitest 添加浏览器配置。

/// <reference types="vitest" />
import { defineConfig } from 'vite';

import angular from '@analogjs/vite-plugin-angular';

export default defineConfig(({ mode }) => ({
  plugins: [angular()],
  test: {
    globals: true,
    setupFiles: ['src/test-setup.ts'],
    // environment: 'jsdom',
    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
    // Vitest browser config
    browser: {
      enabled: true,
      name: 'chromium',
      headless: false, // set to true in CI
      provider: 'playwright',
    },
  },
  define: {
    'import.meta.vitest': mode !== 'production',
  },
}));

运行测试

ng test

这会启动一个 Chromium 浏览器来运行你的测试，并且可以在你的 CI 环境中以无头模式运行。

Vitest 是 Angular 开发人员可使用的测试框架的绝佳补充。

如果你喜欢这篇文章，请点击❤️，让更多人看到。关注我的推特/X账号，并订阅我的YouTube频道，获取更多内容！