Brolands Comments

Brolands

•Created by magicrobots on 12/27/2024 in #help

Test react components, having difficulty with `document global not in Deno` using happy-dom

And then simple test file:

import { cleanup, render } from "@testing-library/react";
import { expect } from "jsr:@std/expect";
import * as React from "react";
import { afterEach, describe, it } from "@std/testing/bdd";

import "../config/TestSetup.ts";

describe("Helloing and worlding", () => {
  afterEach(() => {
    cleanup();
  });
  // ARRANGE
  it("Helloes", () => {
    const screen = render(<p>Hello</p>);
    expect(screen.getByRole("paragraph").innerHTML).toBe("Hello");
  });

  it("Worlds", () => {
    const screen = render(<p>World</p>);
    expect(screen.getByRole("paragraph").innerHTML).toBe("World");
  });
});

import { cleanup, render } from "@testing-library/react";
import { expect } from "jsr:@std/expect";
import * as React from "react";
import { afterEach, describe, it } from "@std/testing/bdd";

import "../config/TestSetup.ts";

describe("Helloing and worlding", () => {
  afterEach(() => {
    cleanup();
  });
  // ARRANGE
  it("Helloes", () => {
    const screen = render(<p>Hello</p>);
    expect(screen.getByRole("paragraph").innerHTML).toBe("Hello");
  });

  it("Worlds", () => {
    const screen = render(<p>World</p>);
    expect(screen.getByRole("paragraph").innerHTML).toBe("World");
  });
});

12 replies

DDeno

•Created by magicrobots on 12/27/2024 in #help

Test react components, having difficulty with `document global not in Deno` using happy-dom

Putting here as a reference test setups for both jsdom and happy-dom stored in TestSetup.ts file. For happy-dom:

import { PropertySymbol, Window} from 'happy-dom';

const window = new Window();
const document = window.document;
const browserWindow = document[PropertySymbol.window];

const setInnerHTML = (html: string) => document.documentElement.innerHTML = html;
const cancelAsync = () => window.happyDOM.abort();

Object.assign(globalThis,{
  window,
  document,
  HTMLElement: browserWindow.HTMLElement,
  Element: browserWindow.Element,
  Node: browserWindow.Node,
  navigator: browserWindow.navigator,
  DocumentFragment: browserWindow.DocumentFragment,
  DocumentType: browserWindow.DocumentType,
  SVGElement: browserWindow.SVGElement,
  Text: browserWindow.Text,
  requestAnimationFrame: browserWindow.requestAnimationFrame,
  cancelAnimationFrame: browserWindow.cancelAnimationFrame,
  setTimeout: browserWindow.setTimeout,
  clearTimeout: browserWindow.clearTimeout,
  setInterval: browserWindow.setInterval,
  clearInterval: browserWindow.clearInterval,
  queueMicrotask: browserWindow.queueMicrotask,
  abortController: browserWindow.AbortController,
  cancelAsync,
  setInnerHTML
})

import { PropertySymbol, Window} from 'happy-dom';

const window = new Window();
const document = window.document;
const browserWindow = document[PropertySymbol.window];

const setInnerHTML = (html: string) => document.documentElement.innerHTML = html;
const cancelAsync = () => window.happyDOM.abort();

Object.assign(globalThis,{
  window,
  document,
  HTMLElement: browserWindow.HTMLElement,
  Element: browserWindow.Element,
  Node: browserWindow.Node,
  navigator: browserWindow.navigator,
  DocumentFragment: browserWindow.DocumentFragment,
  DocumentType: browserWindow.DocumentType,
  SVGElement: browserWindow.SVGElement,
  Text: browserWindow.Text,
  requestAnimationFrame: browserWindow.requestAnimationFrame,
  cancelAnimationFrame: browserWindow.cancelAnimationFrame,
  setTimeout: browserWindow.setTimeout,
  clearTimeout: browserWindow.clearTimeout,
  setInterval: browserWindow.setInterval,
  clearInterval: browserWindow.clearInterval,
  queueMicrotask: browserWindow.queueMicrotask,
  abortController: browserWindow.AbortController,
  cancelAsync,
  setInnerHTML
})

For jsdom:

import {JSDOM} from "jsdom";

const defaultHtml = '<!doctype html><html lang="en"><head title="For testing"><meta charset="utf-8"></head><body></body></html>';
const jsdom = new JSDOM(defaultHtml);
const { window } = jsdom;
const { document } = window;
globalThis.document = document;
(globalThis as any).window = window;
window.console = globalThis.console;

import {JSDOM} from "jsdom";

const defaultHtml = '<!doctype html><html lang="en"><head title="For testing"><meta charset="utf-8"></head><body></body></html>';
const jsdom = new JSDOM(defaultHtml);
const { window } = jsdom;
const { document } = window;
globalThis.document = document;
(globalThis as any).window = window;
window.console = globalThis.console;

12 replies

DDeno

•Created by magicrobots on 12/27/2024 in #help

Test react components, having difficulty with `document global not in Deno` using happy-dom

So, I tried your @magicrobots approach with happy-dom and also approach with jsdom and for me with Deno v2.2.0 happy-dom works much faster. jsdom - 60ms happy-dom - 26ms What is interesting, with Deno.test I don't know why, but tests were taking like 15 seconds with happy-dom, so I thought it was much slower as jsdom was consistent with 60ms. But after using @std/testing/bdd library to have afterEach with cleanUp function in it to have multiple tests running, happy-dom started to perform super fast. So, again, thanks a lot for your setup example! I'm not yet sure if I need all of the properties you've setup for globalThis (not that much experience in FE development), but will see how it goes 🙂

12 replies

DDeno

•Created by magicrobots on 12/27/2024 in #help

Test react components, having difficulty with `document global not in Deno` using happy-dom

Nice, thanks a lot! I will try with jsdom approach that was mentioned in GitHub issue and then also with happy-dom with your example and then see what I like best 🙂 Would be cool to put this somewhere as a tutorial, because I as well wanted to avoid jest completely, as it didn't look so user friendly to me, when I first set it up

12 replies

DDeno

•Created by magicrobots on 12/27/2024 in #help

Test react components, having difficulty with `document global not in Deno` using happy-dom

Hello @magicrobots , Wondering whether you were able to make it work in the end with Deno 2? After searching around, this looks to be the best example of the setup: https://github.com/udibo/react-app-example/tree/main Curious if you did something different 🙂

12 replies