Using Node.js's test runner

import { import registerregister } from 'node:module';

import registerregister('some-typescript-loader');
// TypeScript is supported hereafter
// BUT other test/setup.*.mjs files still must be plain JavaScript!

import { import beforeEachbeforeEach } from 'node:test';

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

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

import beforeEachbeforeEach(function globalSWBeforeEach(): voidglobalSWBeforeEach);
function function globalSWBeforeEach(): voidglobalSWBeforeEach() {
  module globalThisglobalThis.var self: Window & typeof globalThis
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/self)self = new import ServiceWorkerGlobalScopeServiceWorkerGlobalScope();
}

import import assertassert from 'node:assert/strict';
import { import describedescribe, import mockmock, import itit } from 'node:test';

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

import describedescribe('ServiceWorker::onActivate()', () => {
  const const globalSelf: Window & typeof globalThisglobalSelf = module globalThisglobalThis.var self: Window & typeof globalThis
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/self)self;
  const const claim: anyclaim = import mockmock.fn(async function function (local function) mock__claim(): Promise<void>mock__claim() {});
  const const matchAll: anymatchAll = import mockmock.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;
}
An event which takes place in the DOM.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event)Event {
    constructor(...args: any[]args) {
      super('activate', ...args: any[]args);
    }
  }

  before(() => {
    module globalThisglobalThis.var self: Window & typeof globalThis
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/self)self = {
      
clients: {
    claim: any;
    matchAll: any;
}clients: { claim: anyclaim, matchAll: anymatchAll },
    };
  });
  after(() => {
    global.self = const globalSelf: Window & typeof globalThisglobalSelf;
  });

  import itit('should claim all clients', async () => {
    await import onActivateonActivate(new constructor ActivateEvent(...args: any[]): ActivateEventActivateEvent());

    import assertassert.equal(const claim: anyclaim.mock.callCount(), 1);
    import assertassert.equal(const matchAll: anymatchAll.mock.callCount(), 1);
  });
});

import { import basenamebasename, import dirnamedirname, import extnameextname, import joinjoin } from 'node:path';
import { import snapshotsnapshot } from 'node:test';

import snapshotsnapshot.setResolveSnapshotPath(function generateSnapshotPath(testFilePath: string): string
@paramtestFilePath '/tmp/foo.test.js'@returns'/tmp/foo.test.snap.cjs'generateSnapshotPath);
/**
 * @param {string} testFilePath '/tmp/foo.test.js'
 * @returns {string} '/tmp/foo.test.snap.cjs'
 */
function function generateSnapshotPath(testFilePath: string): string
@paramtestFilePath '/tmp/foo.test.js'@returns'/tmp/foo.test.snap.cjs'generateSnapshotPath(testFilePath: string
'/tmp/foo.test.js'
@paramtestFilePath '/tmp/foo.test.js'testFilePath) {
  const const ext: anyext = import extnameextname(testFilePath: string
'/tmp/foo.test.js'
@paramtestFilePath '/tmp/foo.test.js'testFilePath);
  const const filename: anyfilename = import basenamebasename(testFilePath: string
'/tmp/foo.test.js'
@paramtestFilePath '/tmp/foo.test.js'testFilePath, const ext: anyext);
  const const base: anybase = import dirnamedirname(testFilePath: string
'/tmp/foo.test.js'
@paramtestFilePath '/tmp/foo.test.js'testFilePath);

  return import joinjoin(const base: anybase, `${const filename: anyfilename}.snap.cjs`);
}

import { import describedescribe, import itit } 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';

import describedescribe('<SomeComponent>', () => {
  // For people preferring "fat-arrow" syntax, the following is probably better for consistency
  import itit('should render defaults when no props are provided', t: anyt => {
    const const component: anycomponent = import renderrender(<import SomeComponentSomeComponent />).container.firstChild;

    t: anyt.assert.snapshot(import prettyDOMprettyDOM(const component: anycomponent));
  });

  import itit('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 { import registerregister } from 'node:module';

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

import registerregister('some-plaintext-loader');
// plain-text files like graphql can now be imported:
// import GET_ME from 'get-me.gql'; GET_ME = '

import import assertassert from 'node:assert/strict';
import { import describedescribe, import itit } from 'node:test';

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

import describedescribe('Cat', () => {
  import itit('should eat fish', () => {
    const const cat: anycat = new import CatCat();
    const const fish: anyfish = new import FishFish();

    import assertassert.doesNotThrow(() => const cat: anycat.eat(const fish: anyfish));
  });

  import itit('should NOT eat plastic', () => {
    const const cat: anycat = new import CatCat();
    const const plastic: anyplastic = new import PlasticPlastic();

    import assertassert.throws(() => const cat: anycat.eat(const plastic: anyplastic));
  });
});

import { import registerregister } 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';

import registerregister('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: History
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/history)history.History.pushState(data: any, unused: string, url?: string | URL | null): void
[MDN Reference](https://developer.mozilla.org/docs/Web/API/History/pushState)pushState.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)
For a given function, creates a bound function that has the same body as the original function.
The this object of the bound function is associated with the specified object, and has the specified initial parameters.
@paramthisArg The object to be used as the this object.bind(module globalThisglobalThis.
module history
var history: History
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/history)history);
module globalThisglobalThis.
module history
var history: History
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/history)history.History.pushState(data: any, unused: string, url?: string | URL | null): void
[MDN Reference](https://developer.mozilla.org/docs/Web/API/History/pushState)pushState = 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) => void
[MDN Reference](https://developer.mozilla.org/docs/Web/API/History/pushState)pushState(data: anydata, unused: anyunused, url: anyurl);
  module globalThisglobalThis.var location: Location
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/location)location.Location.assign(url: string | URL): void
Navigates to the given URL.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Location/assign)assign(url: anyurl);
};

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

import { import beforebefore, import describedescribe, import mockmock, import itit } 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.

import describedescribe('<SomeOtherComponent>', () => {
  let let SomeOtherComponent: anySomeOtherComponent;
  let let calcSomeValue: anycalcSomeValue;

  import beforebefore(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 = import mockmock.module('./calcSomeValue.js', {
      calcSomeValue: anycalcSomeValue: import mockmock.fn(),
    });

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

  import describedescribe('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).

    import itit('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);
    });
  });
});