Major

Author: owjs3901

.changepacks/changepack_log_uREKTRLL0IO9xmjcfjQiy.json

@@ -0,0 +1,5 @@
+{
+  "changes": { "package.json": "Major" },
+  "note": "Deploy major",
+  "date": "2026-01-01T12:16:43.962770100Z"
+}

README.md

@@ -1,2 +1,76 @@
 # bun-test-env-dom
-bun-test-env-dom is a preload library that provides a ready-to-use DOM
+
+A preload library for Bun that provides a ready-to-use DOM environment for testing. It automatically sets up [happy-dom](https://github.com/capricorn86/happy-dom) and enables proper snapshot testing for React and HTML elements with beautifully formatted output.
+
+## Installation
+
+```bash
+bun add -d bun-test-env-dom
+```
+
+## Setup
+
+Add the following to your `bunfig.toml`:
+
+```toml
+[test]
+preload = ["bun-test-env-dom"]
+```
+
+That's it! The DOM environment is automatically configured when tests run.
+
+## Features
+
+### Snapshot Testing for React & HTML Elements
+
+Snapshot testing works seamlessly with both React elements and HTML elements. The HTML output is automatically formatted for readable snapshots.
+
+```tsx
+import { expect, test } from 'bun:test'
+import { render } from 'bun-test-env-dom'
+
+test('React element snapshot', () => {
+  expect(<Component />).toMatchSnapshot()
+})
+
+test('HTML element snapshot', () => {
+  const { container } = render(<Component />)
+  expect(container).toMatchSnapshot()
+})
+```
+
+### Re-exported @testing-library/react
+
+All functions from `@testing-library/react` are re-exported, so you can import directly from `bun-test-env-dom`:
+
+```tsx
+import { render, screen, fireEvent } from 'bun-test-env-dom'
+
+describe('HomePage', () => {
+  it('should render', () => {
+    const { container } = render(<HomePage />)
+    expect(container).toMatchSnapshot()
+  })
+})
+```
+
+### Full TypeScript Support for Custom Matchers
+
+All additional matchers from `@testing-library/jest-dom` are fully typed:
+
+```tsx
+import { expect, test } from 'bun:test'
+import { render } from 'bun-test-env-dom'
+
+test('custom matchers', () => {
+  const { getByRole } = render(<Button pressed>Click me</Button>)
+
+  expect(getByRole('button')).toBePressed()
+  expect(getByRole('button')).toBeVisible()
+  expect(getByRole('button')).toHaveTextContent('Click me')
+})
+```
+
+## License
+
+Apache-2.0

package.json

@@ -1,7 +1,7 @@
 {
   "name": "bun-test-env-dom",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.4",
   "description": "bun-test-env-dom is a preload library that provides a ready-to-use DOM for testing",
   "author": "JeongMin Oh",
   "license": "Apache-2.0",
@@ -49,7 +49,7 @@
     "lint:fix": "biome check --write .",
     "lint": "biome check .",
     "test": "bun test",
-    "build": "tsc && bun build --target node src/index.ts --production --outfile dist/index.cjs --format cjs --packages external && bun build --target node src/index.ts --production --outfile dist/index.mjs --format esm --packages external",
+    "build": "tsc && bun scripts/clean-dts.ts && bun build --target node src/index.ts --production --outfile dist/index.cjs --format cjs --packages external && bun build --target node src/index.ts --production --outfile dist/index.mjs --format esm --packages external",
     "prepare": "bun run husky"
   }
 }

scripts/clean-dts.ts

@@ -0,0 +1,11 @@
+import { readdir, unlink } from 'node:fs/promises'
+import { join } from 'node:path'
+
+const distDir = join(import.meta.dirname, '..', 'dist')
+const files = await readdir(distDir)
+
+for (const file of files) {
+  if (file.endsWith('.d.ts') && file !== 'index.d.ts') {
+    await unlink(join(distDir, file))
+  }
+}

src/__tests__/__snapshots__/snapshot.test.tsx.snap

@@ -0,0 +1,25 @@
+// Bun Snapshot v1, https://bun.sh/docs/test/snapshots
+
+exports[`SnapshotTest React element snapshot 1`] = `
+"<div>
+  <div>
+    before
+    <div>
+      SnapshotTestInner
+    </div>
+    after
+  </div>
+</div>"
+`;
+
+exports[`SnapshotTest HTML element snapshot with render 1`] = `
+"<div>
+  <div>
+    before
+    <div>
+      SnapshotTestInner
+    </div>
+    after
+  </div>
+</div>"
+`;

src/__tests__/snapshot.test.tsx

@@ -0,0 +1,28 @@
+import { describe, expect, test } from 'bun:test'
+import { createElement } from 'react'
+import { render } from '../index.ts'
+
+function SnapshotTestInner() {
+  return createElement('div', null, 'SnapshotTestInner')
+}
+
+function SnapshotTest() {
+  return createElement(
+    'div',
+    null,
+    'before',
+    createElement(SnapshotTestInner),
+    'after',
+  )
+}
+
+describe('SnapshotTest', () => {
+  test('React element snapshot', () => {
+    expect(createElement(SnapshotTest)).toMatchSnapshot()
+  })
+
+  test('HTML element snapshot with render', () => {
+    const { container } = render(createElement(SnapshotTest))
+    expect(container).toMatchSnapshot()
+  })
+})

src/formatHTMLElement.ts

@@ -1,6 +1,5 @@
 import { prettyHTML } from './prettyHTML.ts'
 
 export function formatHTMLElement(value: HTMLElement) {
-  const html = value.outerHTML
-  return prettyHTML(html)
+  return prettyHTML(value.outerHTML)
 }

src/index.ts

@@ -8,34 +8,38 @@ import type { ReactElement } from 'react'
 import { formatHTMLElement } from './formatHTMLElement.ts'
 import { isReactElement } from './isReactElement.ts'
 
-GlobalRegistrator.register()
-expect.extend(matchers)
+if (!GlobalRegistrator.isRegistered) {
+  GlobalRegistrator.register()
+  expect.extend(matchers)
 
-const originalExpect = expect
-test.mock.module('bun:test', () => {
-  return {
-    ...test,
-    expect: (value: unknown) => {
-      if (isReactElement(value)) {
-        const { container } = render(value as ReactElement)
-        return originalExpect(formatHTMLElement(container))
-      }
-      if (value instanceof HTMLElement) {
-        return originalExpect(formatHTMLElement(value))
-      }
-      return originalExpect(value)
-    },
-  }
-})
+  const originalExpect = expect
+  test.mock.module('bun:test', () => {
+    return {
+      ...test,
+      expect: (value: unknown) => {
+        if (isReactElement(value)) {
+          const { container } = render(value as ReactElement)
+          return originalExpect(formatHTMLElement(container))
+        }
+        if (value instanceof HTMLElement) {
+          return originalExpect(formatHTMLElement(value))
+        }
+        return originalExpect(value)
+      },
+    }
+  })
 
-// Optional: cleans up `render` after each test
-afterEach(() => {
-  cleanup()
-})
+  // Optional: cleans up `render` after each test
+  afterEach(() => {
+    cleanup()
+  })
+}
 
 declare module 'bun:test' {
   interface Matchers<T>
     extends TestingLibraryMatchers<typeof expect.stringContaining, T> {}
   interface AsymmetricMatchers
     extends TestingLibraryMatchers<unknown, unknown> {}
 }
+
+export * from '@testing-library/react'

tsconfig.json

@@ -12,7 +12,8 @@
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "verbatimModuleSyntax": true,
-    "noEmit": true,
+    "emitDeclarationOnly": true,
+    "outDir": "./dist",
 
     // Best practices
     "strict": true,
@@ -24,6 +25,8 @@
     // Some stricter flags (disabled by default)
     "noUnusedLocals": false,
     "noUnusedParameters": false,
-    "noPropertyAccessFromIndexSignature": false
-  }
+    "noPropertyAccessFromIndexSignature": false,
+    "declaration": true
+  },
+  "include": ["src/index.ts"]
 }