Natt Nguyen https://natt.sh My writings on tutorials, technologies, personal development, and reflective insights. Wed, 02 Sep 2026 01:23:35 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed en Natt Nguyen https://natt.sh/favicon.png https://natt.sh <![CDATA[Testing React components with Bun]]> https://natt.sh/blog/2024-12-09-testing-react-components-bun https://natt.sh/blog/2024-12-09-testing-react-components-bun Tue, 10 Dec 2024 00:00:00 GMT

Introduction

In my recent exploration of testing React components, I was impressed by how quickly and easily I could set up Bun. The integrated testing functionality in Bun is incredibly fast and works seamlessly with both React and Next.js projects.

Step 1: Install Required Packages

To get started, install the necessary packages. Notice that there’s no need to install jest or ts-node with Bun:

bun add -D \
@happy-dom/global-registrator \
@testing-library/react \
@testing-library/dom \
@testing-library/jest-dom

Step 2: Set Up Your Test Environment

Create the following setup files to configure your testing environment.

// happydom.ts

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

GlobalRegistrator.register()// testing-library.ts

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

expect.extend(matchers)

afterEach(() => {
cleanup()
})// testing-library.ts

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

expect.extend(matchers)

afterEach(() => {
cleanup()
})# bunfig.toml

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

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

declare module "bun:test" {
interface Matchers
extends TestingLibraryMatchers {}
interface AsymmetricMatchers extends TestingLibraryMatchers {}
}

Step 3: Write Your Test

With everything set up, you're now ready to test your components.

// button.test.tsx

import Button from "@/components/button"
import { render } from "@testing-library/react"
import { describe, expect, it } from "bun:test"

describe("Button Component", () => {
it("renders a button with the correct default type and class name", () => {
const { getByRole } = render(