WXT

Appearance

유닛 테스트 ​

Vitest ​

WXT는 유닛 테스트를 위해 Vitest를 퍼스트클래스로 지원합니다:

ts
// vitest.config.ts
import { defineConfig } from 'vitest/config';
import { WxtVitest } from 'wxt/testing';

export default defineConfig({
  plugins: [WxtVitest()],
});

이 플러그인은 다음과 같은 기능을 제공합니다:

  • @webext-core/fake-browser를 사용해 메모리 내 구현으로 확장 API인 browser를 폴리필합니다.
  • wxt.config.ts에 있는 모든 Vite 설정이나 플러그인을 추가합니다.
  • 자동 임포트가 활성화된 경우 이를 구성합니다.
  • 원격 코드 번들링과 같은 기능을 위한 내부 WXT Vite 플러그인을 적용합니다.
  • WXT가 제공하는 전역 변수를 설정합니다 (import.meta.env.BROWSER, import.meta.env.MANIFEST_VERSION, import.meta.env.IS_CHROME 등).
  • 임포트가 해결될 수 있도록 별칭을 구성합니다 (@/*, @@/* 등).

다음은 유닛 테스트가 설정된 실제 프로젝트들입니다. 코드와 테스트를 살펴보고 어떻게 작성되었는지 확인해 보세요.

테스트 예제 ​

이 예제는 테스트에서 browser.storage(wxt/storage에서 사용)를 모킹할 필요가 없음을 보여줍니다. @webext-core/fake-browser는 메모리 내에서 스토리지를 구현하므로 실제 확장 프로그램에서처럼 동작합니다!

ts
import { describe, it, expect } from 'vitest';
import { fakeBrowser } from 'wxt/testing';

const accountStorage = storage.defineItem<Account>('local:account');

async function isLoggedIn(): Promise<Account> {
  const value = await accountStorage.getValue();
  return value != null;
}

describe('isLoggedIn', () => {
  beforeEach(() => {
    // https://webext-core.aklinker1.io/fake-browser/reseting-state 참고
    fakeBrowser.reset();
  });

  it('should return true when the account exists in storage', async () => {
    const account: Account = {
      username: '...',
      preferences: {
        // ...
      },
    };
    await accountStorage.setValue(account);

    expect(await isLoggedIn()).toBe(true);
  });

  it('should return false when the account does not exist in storage', async () => {
    await accountStorage.deleteValue();

    expect(await isLoggedIn()).toBe(false);
  });
});

다른 테스트 프레임워크 사용하기 ​

다른 프레임워크를 사용하려면 자동 임포트를 비활성화하고, 임포트 별칭을 설정하고, 확장 API를 수동으로 모킹하며, 사용하는 WXT의 모든 기능을 지원하도록 테스트 환경을 설정해야 합니다.

이 작업은 가능하지만 약간 더 많은 설정이 필요합니다. 테스트 환경을 설정하는 방법에 대한 예제는 Vitest 설정을 참고하세요:

https://github.com/wxt-dev/wxt/blob/main/packages/wxt/src/testing/wxt-vitest-plugin.ts