How do you migrate to bun test using @testing-library/react? No docs?

[MarkLyck]

I've been trying to migrate to bun test for my react project (currnently using vitest).

But there's so little documentation on this. I followed the basic steps on https://bun.sh/docs/test/dom to set up happy-dom.

I added happydom.ts to my tsconfig.ts includes list. Which solved the eslint errors in the file.

now I'm getting the following kind of error in all my tests that uses render:

src/Example.test.tsx:
 6 |
 7 | describe('Component', () => {
 8 |   test('should render', async () => {
 9 |     const onFinished = jest.fn()
10 |
11 |     render(
         ^
ReferenceError: Cannot access uninitialized variable.

I believe this error is an issue with bun test, This does not happen with vitest or jest

Here is the file where I define the render function.

import { render } from '@testing-library/react'

import TestProvider from './TestProvider'

const customRender = (ui: any, options?: any) =>
  render(ui, { wrapper: TestProvider, ...options })

export * from '@testing-library/react'
export { customRender as render }

Where TestProvider is a React component with nested providers, like a react QueryProvider & ThemeProvider. The TestProvider just imports Providers directly from libraries, and react.

And this is where it gets quite strange, if I import the TestProvider directly in the test file and use the direct import of render from @testing-library/react, the uninitialized error goes away and a new one appears.

src/Example.test.tsx:
1 | type EnvVariableType = string | boolean | undefined
2 |
3 | export const generateBaseURL = (
4 |   defaultURL: EnvVariableType = 'api-next.colonynetworks.com'
5 | ) => {
6 |   const hostname = window.location.hostname
                       ^
ReferenceError: Can't find variable: window

Why would window not be defined if happy-dom is loaded correctly?

My full test file looks like this:

import { describe, expect, test } from 'bun:test'

import { render, screen, waitFor } from '@/test/test-utils'

import Component from './Component'

describe('Component', () => {
  test('should render', async () => {

    render(<Component/> )

    const text = screen.getByText('test')
    waitFor(() => expect(text).toBeInTheDocument())
  })
})

My ./happydom.ts file:

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

GlobalRegistrator.register()

my bunfig.toml file:

[test]
preload = "./happydom.ts"

I couldn't find any docs to help, or any repositories with a working example. Has anyone managed to migrate their @testing-library projects to use bun test?

I would love to see some docs on how to get it working with @testing-library

[nouman2075]

Can you please create a code sandbox?

[fernandortec]

https://github.com/fernandortec/pizza-shop-web

I managed to create some tests in this repository, feel free to take a look.

[nouman2075]

I do not see any issue with your setup and make sure you are using latest version of bun. I also tried a Wrapper approach and it works fine.
happydom.tsx

export * from "@testing-library/jest-dom/jest-globals";
import { GlobalRegistrator } from "@happy-dom/global-registrator";
import { cleanup } from "@testing-library/react";
import { afterEach } from "bun:test";

import { type RenderOptions, render } from "@testing-library/react";
import { ThemeProvider } from "../src/components/theme/theme-provider";
import { Toaster } from "../src/components/ui/sonner";
import { Helmet, HelmetProvider } from "react-helmet-async";
import { QueryClientProvider } from "@tanstack/react-query";
import { queryClient } from "../src/lib/react-query";

afterEach(() => {
	cleanup();
});

GlobalRegistrator.register();

const Wrapper = (props: PropsWithChildren) => {
	return (
		<HelmetProvider>
			<ThemeProvider storageKey='pizzashop-theme' defaultTheme='dark'>
				<Toaster richColors />
				<Helmet titleTemplate='%s | pizza.shop' />
				<QueryClientProvider client={queryClient}>{props.children}</QueryClientProvider>
			</ThemeProvider>
		</HelmetProvider>
	);
};

// import TestProvider from "./TestProvider";
import type { PropsWithChildren } from "react";

const customRender = (ui: React.ReactNode, options?: RenderOptions) =>
	render(ui, {
		wrapper: Wrapper,
		...options,
	});

export * from "@testing-library/react";
export { customRender as render };

1. Create test/happydom.ts file and move the exisiting test/setup.ts code there
2. In test/setup.tsx, add your customRender code. (Note: It's no compulsory to create 2 separate files (happydom and setup)
3. Now in every test case file, make sure you import it, before, expect.... from bun:test and make sure, all other imports are imported. Right now, bun cannot identify global it, before... just like vitest (vitest provide one config option that add these things in global context).

[fernandortec]

Yeah, my code is working fine, I thought you needed an example