https://github.com/nashaddams/ddom

Testing utilities for React components and vanilla HTML/JS
https://github.com/nashaddams/ddom

deno jsdom react react-testing-library

Last synced: about 2 months ago
JSON representation

Testing utilities for React components and vanilla HTML/JS

• Host: GitHub
• URL: https://github.com/nashaddams/ddom
• Owner: nashaddams
• License: mit
• Created: 2025-01-27T20:32:00.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-10-05T17:55:39.000Z (9 months ago)
• Last Synced: 2025-10-05T19:34:06.153Z (9 months ago)
• Topics: deno, jsdom, react, react-testing-library
• Language: TypeScript
• Homepage: https://jsr.io/@nashaddams/ddom
• Size: 14.6 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# DDOM

[![JSR](https://jsr.io/badges/@nashaddams/ddom)](https://jsr.io/@nashaddams/ddom)

[![JSR score](https://jsr.io/badges/@nashaddams/ddom/score)](https://jsr.io/@nashaddams/ddom)

[![main](https://github.com/nashaddams/ddom/actions/workflows/tests.yml/badge.svg)](https://github.com/nashaddams/ddom/actions)

Testing utilities for React components and vanilla HTML/JS, powered by

[`JSDOM`](https://github.com/jsdom/jsdom).

## Usage

```tsx

import { useState } from "react";

export function Counter({ initialCount }: { initialCount: number }) {

  const [count, setCount] = useState(initialCount);

  const increment = () => setCount((prev) => prev + 1);

  return (

    


      Current value: 

      {count}

      

        Increment

      

    

  );

}

```


```tsx

import { DDOM, getByTestId, waitFor } from "@nashaddams/ddom";

import { createRoot } from "react-dom/client";

import { Counter } from "./counter.tsx";

Deno.test("should render and interact with a react component", async () => {

  using _ = DDOM.register();

  const root = document.getElementById("root")!;

  assertEquals(root.children.length, 0);

  createRoot(root).render();

  await waitFor(() => assertGreater(root.children.length, 0));

  const count = getByTestId("count");

  getByTestId("increment").click();

  await waitFor(() => assertEquals(count.textContent, "4712"));

});

```

### `JSDOM` only

If you prefer to only add [`JSDOM`](https://github.com/jsdom/jsdom) as a

dependency, you can register the DOM globals manually:

```ts

// @ts-types="npm:@types/jsdom@27.0.0"

import { JSDOM } from "npm:jsdom@27.0.0";

const dom = new JSDOM(``);

(globalThis as any).window = dom.window;

(globalThis as any).document = dom.window.document;

```

See [the docs](https://jsr.io/@nashaddams/ddom/doc) for further details.