Using Node.js's test runner

import { function register<Data = any>(specifier: string | URL, parentURL?: string | URL, options?: Module.RegisterOptions<Data>): void (+1 overload)register } from 'node:module';

register<any>(specifier: string | URL, parentURL?: string | URL, options?: Module.RegisterOptions<any> | undefined): void (+1 overload)register('some-typescript-loader');
// TypeScript is supported hereafter
// BUT other test/setup.*.mjs files still must be plain JavaScript!

import { function beforeEach(fn?: test.HookFn, options?: test.HookOptions): voidbeforeEach } from 'node:test';

import { import ServiceWorkerGlobalScopeServiceWorkerGlobalScope } from './globals/ServiceWorkerGlobalScope.js';

import './setup.mjs'; // 💡

function beforeEach(fn?: test.HookFn, options?: test.HookOptions): voidbeforeEach(function globalSWBeforeEach(): voidglobalSWBeforeEach);
function function globalSWBeforeEach(): voidglobalSWBeforeEach() {
  module globalThisglobalThis.var self: Window & typeof globalThisself = new import ServiceWorkerGlobalScopeServiceWorkerGlobalScope();
}

import 
const assert: Omit<typeof assert, "equal" | "notEqual" | "deepEqual" | "notDeepEqual" | "ok" | "strictEqual" | "deepStrictEqual" | "ifError" | "strict" | "AssertionError"> & {
    ...;
}assert from 'node:assert/strict';
import { function describe(name?: string, options?: it.TestOptions, fn?: it.SuiteFn): Promise<void> (+3 overloads)describe, const mock: it.MockTrackermock, function it(name?: string, fn?: it.TestFn): Promise<void> (+3 overloads)it } from 'node:test';

import { import onActivateonActivate } from './onActivate.js';

function describe(name?: string, fn?: it.SuiteFn): Promise<void> (+3 overloads)describe('ServiceWorker::onActivate()', () => {
  const const globalSelf: Window & typeof globalThisglobalSelf = module globalThisglobalThis.var self: Window & typeof globalThisself;
  const const claim: it.Mock<() => Promise<void>>claim = const mock: it.MockTrackermock.test.MockTracker.fn<() => Promise<void>>(original?: (() => Promise<void>) | undefined, options?: it.MockFunctionOptions): it.Mock<() => Promise<void>> (+1 overload)fn(async function function (local function) mock__claim(): Promise<void>mock__claim() {});
  const const matchAll: it.Mock<() => Promise<void>>matchAll = const mock: it.MockTrackermock.test.MockTracker.fn<() => Promise<void>>(original?: (() => Promise<void>) | undefined, options?: it.MockFunctionOptions): it.Mock<() => Promise<void>> (+1 overload)fn(async function function (local function) mock__matchAll(): Promise<void>mock__matchAll() {});

  class class ActivateEventActivateEvent extends 
var Event: {
    new (type: string, eventInitDict?: EventInit): Event;
    prototype: Event;
    readonly NONE: 0;
    readonly CAPTURING_PHASE: 1;
    readonly AT_TARGET: 2;
    readonly BUBBLING_PHASE: 3;
}Event {
    constructor(...args: any[]args) {
      super('activate', ...args: any[]args);
    }
  }

  before(() => {
    module globalThisglobalThis.var self: Window & typeof globalThisself = {
      
clients: {
    claim: it.Mock<() => Promise<void>>;
    matchAll: it.Mock<() => Promise<void>>;
}clients: { claim: it.Mock<() => Promise<void>>claim, matchAll: it.Mock<() => Promise<void>>matchAll },
    };
  });
  after(() => {
    var global: typeof globalThisglobal.var self: Window & typeof globalThisself = const globalSelf: Window & typeof globalThisglobalSelf;
  });

  function it(name?: string, fn?: it.TestFn): Promise<void> (+3 overloads)it('should claim all clients', async () => {
    await import onActivateonActivate(new constructor ActivateEvent(...args: any[]): ActivateEventActivateEvent());

    
const assert: Omit<typeof assert, "equal" | "notEqual" | "deepEqual" | "notDeepEqual" | "ok" | "strictEqual" | "deepStrictEqual" | "ifError" | "strict" | "AssertionError"> & {
    ...;
}assert.equal: <1>(actual: unknown, expected: 1, message?: string | Error) => asserts actual is 1equal(const claim: it.Mock<() => Promise<void>>claim.mock: it.MockFunctionContext<() => Promise<void>>mock.test.MockFunctionContext<() => Promise<void>>.callCount(): numbercallCount(), 1);
    
const assert: Omit<typeof assert, "equal" | "notEqual" | "deepEqual" | "notDeepEqual" | "ok" | "strictEqual" | "deepStrictEqual" | "ifError" | "strict" | "AssertionError"> & {
    ...;
}assert.equal: <1>(actual: unknown, expected: 1, message?: string | Error) => asserts actual is 1equal(const matchAll: it.Mock<() => Promise<void>>matchAll.mock: it.MockFunctionContext<() => Promise<void>>mock.test.MockFunctionContext<() => Promise<void>>.callCount(): numbercallCount(), 1);
  });
});

import { function (method) basename(path: string, suffix?: string): stringbasename, function (method) dirname(path: string): stringdirname, function (method) extname(path: string): stringextname, function (method) join(...paths: string[]): stringjoin } from 'node:path';
import { snapshot } from 'node:test';

snapshot.function test.snapshot.setResolveSnapshotPath(fn: (path: string | undefined) => string): voidsetResolveSnapshotPath(function generateSnapshotPath(testFilePath: string): stringgenerateSnapshotPath);
/**
 * @param {string} testFilePath '/tmp/foo.test.js'
 * @returns {string} '/tmp/foo.test.snap.cjs'
 */
function function generateSnapshotPath(testFilePath: string): stringgenerateSnapshotPath(testFilePath: stringtestFilePath) {
  const const ext: stringext = function extname(path: string): stringextname(testFilePath: stringtestFilePath);
  const const filename: stringfilename = function basename(path: string, suffix?: string): stringbasename(testFilePath: stringtestFilePath, const ext: stringext);
  const const base: stringbase = function dirname(path: string): stringdirname(testFilePath: stringtestFilePath);

  return function join(...paths: string[]): stringjoin(const base: stringbase, `${const filename: stringfilename}.snap.cjs`);
}

import { function describe(name?: string, options?: it.TestOptions, fn?: it.SuiteFn): Promise<void> (+3 overloads)describe, function it(name?: string, fn?: it.TestFn): Promise<void> (+3 overloads)it } from 'node:test';

import { import prettyDOMprettyDOM } from '@testing-library/dom';
import { import renderrender } from '@testing-library/react'; // Any framework (ex svelte)

import { import SomeComponentSomeComponent } from './SomeComponent.jsx';

function describe(name?: string, fn?: it.SuiteFn): Promise<void> (+3 overloads)describe('<SomeComponent>', () => {
  // For people preferring "fat-arrow" syntax, the following is probably better for consistency
  function it(name?: string, fn?: it.TestFn): Promise<void> (+3 overloads)it('should render defaults when no props are provided', t: it.TestContextt => {
    const const component: anycomponent = import renderrender(<import SomeComponentSomeComponent />).container.firstChild;

    t: it.TestContextt.test.TestContext.assert: it.TestContextAssertassert.test.TestContextAssert.snapshot(value: any, options?: it.AssertSnapshotOptions): voidsnapshot(import prettyDOMprettyDOM(const component: anycomponent));
  });

  function it(name?: string, fn?: it.TestFn): Promise<void> (+3 overloads)it('should consume `foo` when provided', function () {
    const const component: anycomponent = import renderrender(<import SomeComponentSomeComponent foo: stringfoo="bar" />).container.firstChild;

    this.assert.snapshot(import prettyDOMprettyDOM(const component: anycomponent));
    // `this` works only when `function` is used (not "fat arrow").
  });
});

import { function register<Data = any>(specifier: string | URL, parentURL?: string | URL, options?: Module.RegisterOptions<Data>): void (+1 overload)register } from 'node:module';

import './setup.mjs'; // 💡

register<any>(specifier: string | URL, parentURL?: string | URL, options?: Module.RegisterOptions<any> | undefined): void (+1 overload)register('some-plaintext-loader');
// plain-text files like graphql can now be imported:
// import GET_ME from 'get-me.gql'; GET_ME = '

import 
const assert: Omit<typeof assert, "equal" | "notEqual" | "deepEqual" | "notDeepEqual" | "ok" | "strictEqual" | "deepStrictEqual" | "ifError" | "strict" | "AssertionError"> & {
    ...;
}assert from 'node:assert/strict';
import { function describe(name?: string, options?: it.TestOptions, fn?: it.SuiteFn): Promise<void> (+3 overloads)describe, function it(name?: string, fn?: it.TestFn): Promise<void> (+3 overloads)it } from 'node:test';

import { import CatCat } from './Cat.js';
import { import FishFish } from './Fish.js';
import { import PlasticPlastic } from './Plastic.js';

function describe(name?: string, fn?: it.SuiteFn): Promise<void> (+3 overloads)describe('Cat', () => {
  function it(name?: string, fn?: it.TestFn): Promise<void> (+3 overloads)it('should eat fish', () => {
    const const cat: anycat = new import CatCat();
    const const fish: anyfish = new import FishFish();

    
const assert: Omit<typeof assert, "equal" | "notEqual" | "deepEqual" | "notDeepEqual" | "ok" | "strictEqual" | "deepStrictEqual" | "ifError" | "strict" | "AssertionError"> & {
    ...;
}assert.doesNotThrow: (block: () => unknown, message?: string | Error) => void (+1 overload)doesNotThrow(() => const cat: anycat.eat(const fish: anyfish));
  });

  function it(name?: string, fn?: it.TestFn): Promise<void> (+3 overloads)it('should NOT eat plastic', () => {
    const const cat: anycat = new import CatCat();
    const const plastic: anyplastic = new import PlasticPlastic();

    
const assert: Omit<typeof assert, "equal" | "notEqual" | "deepEqual" | "notDeepEqual" | "ok" | "strictEqual" | "deepStrictEqual" | "ifError" | "strict" | "AssertionError"> & {
    ...;
}assert.throws: (block: () => unknown, message?: string | Error) => void (+1 overload)throws(() => const cat: anycat.eat(const plastic: anyplastic));
  });
});

import { function register<Data = any>(specifier: string | URL, parentURL?: string | URL, options?: Module.RegisterOptions<Data>): void (+1 overload)register } from 'node:module';

// ⚠️ Ensure only 1 instance of JSDom is instantiated; multiples will lead to many 🤬
import import jsdomjsdom from 'global-jsdom';

import './setup.units.mjs'; // 💡

import { import IndexedDbIndexedDb } from './globals/IndexedDb.js';

register<any>(specifier: string | URL, parentURL?: string | URL, options?: Module.RegisterOptions<any> | undefined): void (+1 overload)register('some-css-modules-loader');

import jsdomjsdom(var undefinedundefined, {
  url: stringurl: 'https://test.example.com', // ⚠️ Failing to specify this will likely lead to many 🤬
});

// Example of how to decorate a global.
// JSDOM's `history` does not handle navigation; the following handles most cases.
const const pushState: (data: any, unused: string, url?: string | URL | null) => voidpushState = module globalThisglobalThis.
module history
var history: Historyhistory.History.pushState(data: any, unused: string, url?: string | URL | null): voidpushState.CallableFunction.bind<(data: any, unused: string, url?: string | URL | null) => void>(this: (data: any, unused: string, url?: string | URL | null) => void, thisArg: unknown): (data: any, unused: string, url?: string | URL | null) => void (+1 overload)bind(module globalThisglobalThis.
module history
var history: Historyhistory);
module globalThisglobalThis.
module history
var history: Historyhistory.History.pushState(data: any, unused: string, url?: string | URL | null): voidpushState = function function (local function) mock_pushState(data: any, unused: any, url: any): voidmock_pushState(data: anydata, unused: anyunused, url: anyurl) {
  const pushState: (data: any, unused: string, url?: string | URL | null) => voidpushState(data: anydata, unused: anyunused, url: anyurl);
  module globalThisglobalThis.var location: Locationlocation.Location.assign(url: string | URL): voidassign(url: anyurl);
};

beforeEach(function globalUIBeforeEach(): voidglobalUIBeforeEach);
function function globalUIBeforeEach(): voidglobalUIBeforeEach() {
  module globalThisglobalThis.indexedDb = new import IndexedDbIndexedDb();
}

import { function before(fn?: it.HookFn, options?: it.HookOptions): voidbefore, function describe(name?: string, options?: it.TestOptions, fn?: it.SuiteFn): Promise<void> (+3 overloads)describe, const mock: it.MockTrackermock, function it(name?: string, fn?: it.TestFn): Promise<void> (+3 overloads)it } from 'node:test';

import { import screenscreen } from '@testing-library/dom';
import { import renderrender } from '@testing-library/react'; // Any framework (ex svelte)

// ⚠️ Note that SomeOtherComponent is NOT a static import;
// this is necessary in order to facilitate mocking its own imports.

function describe(name?: string, fn?: it.SuiteFn): Promise<void> (+3 overloads)describe('<SomeOtherComponent>', () => {
  let let SomeOtherComponent: anySomeOtherComponent;
  let let calcSomeValue: anycalcSomeValue;

  function before(fn?: it.HookFn, options?: it.HookOptions): voidbefore(async () => {
    // ⚠️ Sequence matters: the mock must be set up BEFORE its consumer is imported.

    // Requires the `--experimental-test-module-mocks` be set.
    let calcSomeValue: anycalcSomeValue = const mock: it.MockTrackermock.test.MockTracker.module(specifier: string, options?: it.MockModuleOptions): it.MockModuleContextmodule('./calcSomeValue.js', {
      calcSomeValue: it.Mock<(...args: any[]) => undefined>calcSomeValue: const mock: it.MockTrackermock.test.MockTracker.fn<(...args: any[]) => undefined>(original?: ((...args: any[]) => undefined) | undefined, options?: it.MockFunctionOptions): it.Mock<(...args: any[]) => undefined> (+1 overload)fn(),
    });

    ({ type SomeOtherComponent: anySomeOtherComponent } = await import('./SomeOtherComponent.jsx'));
  });

  function describe(name?: string, fn?: it.SuiteFn): Promise<void> (+3 overloads)describe('when calcSomeValue fails', () => {
    // This you would not want to handle with a snapshot because that would be brittle:
    // When inconsequential updates are made to the error message,
    // the snapshot test would erroneously fail
    // (and the snapshot would need to be updated for no real value).

    function it(name?: string, fn?: it.TestFn): Promise<void> (+3 overloads)it('should fail gracefully by displaying a pretty error', () => {
      let calcSomeValue: anycalcSomeValue.mockImplementation(function function (local function) mock__calcSomeValue(): nullmock__calcSomeValue() {
        return null;
      });

      import renderrender(<let SomeOtherComponent: anySomeOtherComponent />);

      const const errorMessage: anyerrorMessage = import screenscreen.queryByText('unable');

      assert.ok(const errorMessage: anyerrorMessage);
    });
  });
});