Deno support

[kirillgroshkov]

Sorry, https://twitter.com/kentcdodds/status/1260716918526242816
:)

[kentcdodds]

Booo! 😆

lol, but in all seriousness, I'd be curious to know what it takes to support Deno, but I don't think we need an issue open about this as it's not a priority until someone could reasonably make JSDOM (or similar) work in Deno, so I'm going to close this.

[YOU54F]

Hey @kentcdodds ,

I've started messing about with deno & react, using aleph.js and wanted to look at using react-testing-library or a deno equivalent, and stumbled across this.

We can use JSDOM in deno, example here

https://github.com/YOU54F/deno-examples/blob/main/jsdom/jsdom.test.ts

Only started using deno yesterday, out of curiosity to build an express like provider, and react based consumer equiv and exploring the available testing tools.

[kigiri]

You could also check https://github.com/b-fuze/deno-dom in a similar style, a more deno native lib.
Since deno handle JSX out of the box now, it could be a pretty nice DX to test react code without having to install and config anything, just deno run and your tests run

[Industrial]

Hello.

Libraries like JSDOM are working in Deno.

I am trying to get testing-library to work and keep getting the error:

error: TypeError: For queries bound to document.body a global document has to be available... Learn more: https://testing-library.com/s/screen-global-error
    at Object.helpers.<computed> [as queryByText] (https://esm.sh/v92/@testing-library/[email protected]/deno/dom.development.js:2365:11)
    at file:///home/tom/Code/code9/deno/test-fresh/components/Container.test.tsx:32:17

I have tried deno-dom-wasm, deno_dom, and jsdom but when I do:

  globalThis.document = document;
  globalThis.window.document = document;

I keep getting that error.

I'm not sure how to patch it correctly, since Deno provides a globalThis.window environment and it is readonly.

When using

import 'npm:global-jsdom/register'

But that throws the error:

error: TypeError: Cannot assign to read only property 'window' of object '#<Window>'

The DOM libraries are working by themselves. They just can't be put on the global object easily.

Maybe there can be a way to configure/pass the document object to testing-library? That would make it easy to swap the DOM library.

[Industrial]

@kentcdodds Can we open this ticket again? Being able to do proper component tests will make Deno a much more reliable platform for doing React apps.

Would be great if the https://github.com/denoland/fresh starter would include some component tests as an example and used react-testing-library.

[kentcdodds]

If someone wants to work on that it's great by me! I don't have the bandwidth to work on it personally. As far as I'm aware, nothing has changed since my last comment on this so I don't see a reason to reopen 🤷‍♂️

[john-griffin]

I was eventually able to get this working but it's very messy, summarized here https://github.com/john-griffin/deno-dom-test

[KyleJune]

I just revisited this and found that Deno does support using react testing library now. I believe improvements to the npm compatibility over the past year is what got it working. I'm not sure the minimum version of Deno that is required, I just know it works in the current version (1.45.3).

To get react working, you need these compiler options and imports in your deno configuration file.

{
  "compilerOptions": {
    "lib": ["esnext", "dom", "dom.iterable", "dom.asynciterable", "deno.ns"],
    "jsx": "react-jsx",
    "jsxImportSource": "react",
    "jsxImportSourceTypes": "@types/react"
  },
  "imports": {
    "react": "npm:react@18",
    "@types/react": "npm:@types/react@18",
    "react-dom": "npm:react-dom@18",
    "@testing-library/react": "npm:@testing-library/react@16",
    "global-jsdom": "npm:global-jsdom@24",
    "@std/assert": "jsr:@std/assert@1",
    "@std/testing": "jsr:@std/testing@0"
  }
}

Here is a simple component I wrote to test.

export function Loading() {
  return <div>Loading...</div>;
}

Then here is an example of a test file. It uses Deno's test runner.

import { assertEquals } from "@std/assert";
import { describe, it } from "@std/testing/bdd";
import "./global-jsdom.ts";
import { cleanup, render, screen } from "@testing-library/react";
import { Loading } from "./loading.tsx";

const loadingTests = describe({
  name: "Loading",
  afterEach() {
    cleanup();
  },
});

it(loadingTests, "renders loading message", () => {
  render(<Loading />);
  assertEquals(screen.getByText("Loading...").textContent, "Loading...");
});

I got it working based on your setup documentation for using without jest.
https://testing-library.com/docs/react-testing-library/setup/#using-without-jest

I wasn't able to use global-jsdom/register though. When I tried importing it, I get the following error at runtime from Deno.

error: Uncaught Error: [ERR_INVALID_PACKAGE_TARGET] Invalid "exports" target {"require":"./commonjs/register.cjs","default":"./esm/register.mjs"} defined for './register' in the package config /home/kyle/.cache/deno/npm/registry.npmjs.org/global-jsdom/24.0.0/package.json imported from 'file:///home/kyle/Projects/deno/react_app/example/components/loading.test.tsx'; target must start with "./"
    at Object.resolveModuleNames (ext:deno_tsc/99_main_compiler.js:770:28)
    at actualResolveModuleNamesWorker (ext:deno_tsc/00_typescript.js:124316:142)
    at resolveModuleNamesWorker (ext:deno_tsc/00_typescript.js:124748:20)
    at resolveModuleNamesReusingOldState (ext:deno_tsc/00_typescript.js:124834:14)
    at processImportedModules (ext:deno_tsc/00_typescript.js:126351:118)
    at findSourceFileWorker (ext:deno_tsc/00_typescript.js:126129:7)
    at findSourceFile (ext:deno_tsc/00_typescript.js:125980:20)
    at ext:deno_tsc/00_typescript.js:125929:22
    at getSourceFileFromReferenceWorker (ext:deno_tsc/00_typescript.js:125900:26)
    at processSourceFile (ext:deno_tsc/00_typescript.js:125927:5)

To workaround this, I looked at what register does and found all it does is import global-jsdom and call the default exported function. To ensure it runs before I import @testing-library/react, I put the equivalent of global-jsdom/register in a separate file and import that first. Below is the imported "./global-jsdom.ts" file from my test example.

import jsdom from "global-jsdom";
jsdom();

Below is an example of the output from running deno test for this file.

The --allow-env flag is required, without it you get the following error.

One thing that I think would be a nice addition to react testing library would be if the render function was made to be disposable. That would make it so that the test would automatically cleanup after the context where render is called is left. I believe that could be done by simply updating the return for render to include a Symbol.dispose property that is a function that calls the cleanup function. Below is an example where the customRender function does that.

import { assertEquals } from "@std/assert";
import { describe, it } from "@std/testing/bdd";
import "./global-jsdom.ts";
import { cleanup, render, type RenderOptions } from "@testing-library/react";
import { Loading } from "./loading.tsx";

function customRender(
  ui: React.ReactElement,
  options?: Omit<RenderOptions, "queries">,
): ReturnType<typeof render> & Disposable {
  const result = render(ui, options);
  return {
    ...result,
    [Symbol.dispose]() {
      cleanup();
    },
  };
}

const loadingTests = describe("Loading");

it(loadingTests, "renders loading message", () => {
  using screen = customRender(<Loading />);
  assertEquals(screen.getByText("Loading...").textContent, "Loading...");
});

Here is the TypeScript documentation on using declarations and explicit resource management.
https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-2.html