[With test] Type error in Bootstrap's class `Toast`

[Spixmaster]

v16.6.0 with Bun.

The following test fails.

import {assert} from "assert-ts";
import {Toast} from "bootstrap";
import {test} from "bun:test";
import {Browser, type BrowserContext, type BrowserPage} from "happy-dom";

test("showcase", (): undefined =>
{
    const browser: Browser = new Browser({
        settings: {
            disableErrorCapturing: true,
            disableJavaScriptEvaluation: true,
            fetch: {disableSameOriginPolicy: true}
        }
    });
    const context: BrowserContext = browser.defaultContext;
    const page: BrowserPage = context.newPage();
    //@ts-expect-error
    global.window = page.mainFrame.window;
    //@ts-expect-error
    global.document = page.mainFrame.window.document;
    document.body.innerHTML = `<div id="a"></div>`;
    localStorage.clear();

    const a: HTMLElement | null = document.getElementById("a");
    assert(a !== null);
    const toast: Toast = new Toast(a, {autohide: false});
    toast.show();
    toast.dispose();
});

Output:

tests/src-web/typescript/consent.test.ts:
✓ showcase [4.38ms]
4353 |       this._clearTimeout();
4354 |       if (this._config.animation) {
4355 |         this._element.classList.add(CLASS_NAME_FADE);
4356 |       }
4357 |       const complete = () => {
4358 |         this._element.classList.remove(CLASS_NAME_SHOWING);
                    ^
TypeError: null is not an object (evaluating 'this._element.classList')
      at complete (/home/matheus/programmieren/c++/argo/node_modules/bootstrap/dist/js/bootstrap.js:4358:14)
      at execute (/home/matheus/programmieren/c++/argo/node_modules/bootstrap/dist/js/bootstrap.js:272:53)
      at handler (/home/matheus/programmieren/c++/argo/node_modules/bootstrap/dist/js/bootstrap.js:290:7)
      at #callDispatchEventListeners (/home/matheus/programmieren/c++/argo/node_modules/happy-dom/lib/event/EventTarget.js:219:30)
      at dispatchEvent (/home/matheus/programmieren/c++/argo/node_modules/happy-dom/lib/event/EventTarget.js:92:14)
      at dispatchEvent (/home/matheus/programmieren/c++/argo/node_modules/happy-dom/lib/nodes/element/Element.js:960:35)
      at #goThroughDispatchEventPhases (/home/matheus/programmieren/c++/argo/node_modules/happy-dom/lib/event/EventTarget.js:143:38)
      at dispatchEvent (/home/matheus/programmieren/c++/argo/node_modules/happy-dom/lib/event/EventTarget.js:88:18)
      at dispatchEvent (/home/matheus/programmieren/c++/argo/node_modules/happy-dom/lib/nodes/element/Element.js:960:35)
      at triggerTransitionEnd (/home/matheus/programmieren/c++/argo/node_modules/bootstrap/dist/js/bootstrap.js:145:13)

[capricorn86]

Thank you for reporting @Spixmaster! 🙂

I can't be sure without testing this myself, but I would guess that the "bootstrap" library may be dependent on certain properties to be on the global object. It may be dependent on it already when importing, so in that case you should add GlobalRegistrator to a test setup that is initialized before loading the library.

See for how to setup Bun with GlobalRegistrator:
https://bun.sh/guides/test/happy-dom

[Spixmaster]

I already did the setup with GlobalRegistrator.