vitest-browser-html というライブラリを書いた

Vitest Browser モードはブラウザ上でテストを実行できるモードで、JSDOMを使わずにブラウザのAPIを使ってちゃんとテストできるのが便利。

しかしながら、対応しているライブラリが React や Vue などモダンなものばっかりで、jQueryやAlpine.jsなどには対応していなかった。ということで vitest-browser-html というライブラリを作って公開してみた。

使い方

npm install -D vitest-browser-html

でインストールして、以下のようにして利用する。

import { render } from 'vitest-browser-html'
import { page } from '@vitest/browser/context'
import { expect, it } from 'vitest'

it('render String', async () => {
  const screen = await render('<div>String</div>');
  await expect.element(screen.getByText('String')).toBeVisible();
});

render関数の中にHTML文字列を入れてもらえればOK。

Alpine.jsでテストしたい場合は Alpine.initTree() をcontainerに適用すればOK。

import { render } from 'vitest-browser-html';
import { it, expect } from 'vitest';
import Alpine from 'alpinejs';

it('render by Alpine', async () => {
  const screen = await render(
    '<div x-data="{ foo: `bar` }" x-text="foo">Hello World</div>',
  );
  Alpine.initTree(screen.container);
  await expect.element(screen.getByText("bar")).toBeVisible();
});

jQueryの場合はこんな感じでテストできるようになる。

import { render } from 'vitest-browser-html';
import { it, expect } from 'vitest';
import $ from 'jquery';

it('render by jQuery', async () => {
  const screen = await render(
    '<div id="some-id" data-testid="some-id">hoge</div>',
  );
  $('#some-id').text('fuga');
  await expect.element(screen.getByTestId("some-id")).toHaveTextContent("fuga");
});

これでjQueryを使っているDOM操作系の関数やAlpine.jsのコンポーネントのテストができるようになる…！