SolidJS•15mo ago

How do I test this behavior?

I want to test the following behavior but I think there's no DOM tree here, right? When we're testing SolidJS components how do I visualize the current tree?

describe("Turnstile Component", () => {
    it("renders the Turnstile component", () => {
        createRoot(() => {
            const container = (
                <Turnstile sitekey="" onToken={(t) => {}} />
            ) as HTMLDivElement;

            expect(container.outerHTML).toBe("<div></div>");
      console.log("SCRIPT: ", document.querySelector("#turnstile-script")); // null, onMount creates an element with the id="turnstile-script"
        });
    });
 });

describe("Turnstile Component", () => {
    it("renders the Turnstile component", () => {
        createRoot(() => {
            const container = (
                <Turnstile sitekey="" onToken={(t) => {}} />
            ) as HTMLDivElement;

            expect(container.outerHTML).toBe("<div></div>");
      console.log("SCRIPT: ", document.querySelector("#turnstile-script")); // null, onMount creates an element with the id="turnstile-script"
        });
    });
 });

26 Replies

Alex Lohr•15mo ago

How are you testing this? I would advise to use vitest + jsdom + @solidjs/testing-library using jsdom as environment, you can expect a dom tree (though timing might be an issue).

Guilherme Rosado•15mo ago

Hmmm I'm only using vitest, I'll take a look 💪 Do you have any example that already incorporates both? Any github repo Already found it

Alex Lohr•15mo ago

yes.

Guilherme Rosado•15mo ago

I think I got this 💪 Thanks

Alex Lohr•15mo ago

If you have any issues with our testing-library, please ping me, I'm the maintainer 🙂

Guilherme Rosado•15mo ago

@lexlohr This is not related to the library, but I'm pretty much stuck. I'm trying to test a <script> that is loaded async and is injected on the head of the DOM tree. This script is suposed to fetch the turnstile widget and then I can execute window.turnstile.render. The test hangs on loading the scripts (5 seconds limit) Do you have any experience when testing something like this?

Alex Lohr•15mo ago

Testing library has waitFor for those cases.

Guilherme Rosado•15mo ago

        const scriptTag = document.head.querySelector("#turnstile-script");
        expect(scriptTag).toBeInTheDocument();

        const scriptLoadPromise = new Promise<void>((resolve) => {
            console.log("scriptTag: ", scriptTag?.id);
            scriptTag?.addEventListener("load", () => {
                resolve();
            });

        });
        await waitFor(() => scriptLoadPromise, { timeout: 5000 });

        const scriptTag = document.head.querySelector("#turnstile-script");
        expect(scriptTag).toBeInTheDocument();

        const scriptLoadPromise = new Promise<void>((resolve) => {
            console.log("scriptTag: ", scriptTag?.id);
            scriptTag?.addEventListener("load", () => {
                resolve();
            });

        });
        await waitFor(() => scriptLoadPromise, { timeout: 5000 });

Yeah! The turnstile isn't injected into the window object Maybe this isn't possible to test? window behaves differently on jest env?

Alex Lohr•15mo ago

Not that much usually.

Alex Lohr•15mo ago

Have you tried https://github.com/solidjs-community/solid-primitives/blob/main/packages/script-loader/README.md ?

GitHub

solid-primitives/README.md at main · solidjs-community/solid-primit...

A library of high-quality primitives that extend SolidJS reactivity. - solid-primitives/README.md at main · solidjs-community/solid-primitives

Guilherme Rosado•15mo ago

Deam Pretty neat Will check it out

Alex Lohr•15mo ago

Hope it'll help. We try to cover all the bases 😉

Guilherme Rosado•15mo ago

Hehe I've seen 🙂 Currently using lot of solid, it's been an awesome experience!

Alex Lohr•15mo ago

Happy to hear that.

Guilherme Rosado•15mo ago

Really love using the Real DOM, then I can just hammer on the gsap and other client-side libraries Yeah! It isn't injecting the turnstile property on window

Alex Lohr•15mo ago

You can use onError to check if something went amiss.

Guilherme Rosado•15mo ago

I gave up I'll try later on 🥲

Alex Lohr•15mo ago

I'll be back in ~5h, if you want, I can do some pair-programming with you then.

Guilherme Rosado•15mo ago

Ups! I'm sorry just answering now. Well that would be awesome. If you're still up to!

Alex Lohr•15mo ago

I'm currently a bit busy, will ping you when I'm ready.

Guilherme Rosado•15mo ago

🙌