Использование Testing Library с Bun

Вы можете использовать Testing Library с тестовым раннером Bun.

В качестве предварительного условия для использования Testing Library вам нужно установить Happy Dom. (смотрите руководство Bun по Happy DOM для получения дополнительной информации).

bun add -D @happy-dom/global-registrator

Далее следует установить пакеты Testing Library, которые вы планируете использовать. Например, если вы настраиваете тестирование для React, ваши установки могут выглядеть так. Вам также нужно установить @testing-library/jest-dom для работы матчеров позже.

bun add -D @testing-library/react @testing-library/dom @testing-library/jest-dom

Далее вам нужно создать скрипт предварительной загрузки для Happy DOM и Testing Library. Для получения дополнительной информации о скрипте настройки Happy DOM смотрите руководство Bun по Happy DOM.

import { GlobalRegistrator } from "@happy-dom/global-registrator";

GlobalRegistrator.register();

Для Testing Library вы захотите расширить функцию expect из Bun матчерами Testing Library. Опционально, для лучшего соответствия поведению тестовых раннеров, таких как Jest, вы можете захотеть выполнять очистку после каждого теста.

import { afterEach, expect } from "bun:test";
import { cleanup } from "@testing-library/react";
import * as matchers from "@testing-library/jest-dom/matchers";

expect.extend(matchers);

// Опционально: очищает `render` после каждого теста
afterEach(() => {
  cleanup();
});

Далее добавьте эти скрипты предварительной загрузки в ваш bunfig.toml (вы также можете поместить всё в один скрипт preload.ts, если предпочитаете).

toml

[test]
preload = ["./happydom.ts", "./testing-library.ts"]

Если вы используете TypeScript, вам также нужно использовать объединение объявлений, чтобы новые типы матчеров отображались в вашем редакторе. Для этого создайте файл объявления типов, который расширяет Matchers следующим образом.

import { TestingLibraryMatchers } from "@testing-library/jest-dom/matchers";
import { Matchers, AsymmetricMatchers } from "bun:test";

declare module "bun:test" {
  interface Matchers<T> extends TestingLibraryMatchers<typeof expect.stringContaining, T> {}
  interface AsymmetricMatchers extends TestingLibraryMatchers {}
}

Теперь вы должны иметь возможность использовать Testing Library в ваших тестах.

tsx

import { test, expect } from "bun:test";
import { screen, render } from "@testing-library/react";
import { MyComponent } from "./myComponent";

test("Можно использовать Testing Library", () => {
  render(MyComponent);
  const myComponent = screen.getByTestId("my-component");
  expect(myComponent).toBeInTheDocument();
});

Обратитесь к документации Testing Library, репозиторию Happy DOM и Документация > Тестирование > DOM для полной документации о написании браузерных тестов с Bun.