SolidJS•2y 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•2y 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 RosadoOP•2y 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•2y ago

yes.

Guilherme RosadoOP•2y ago

I think I got this 💪 Thanks

Alex Lohr•2y ago

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

Guilherme RosadoOP•2y 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•2y ago

Testing library has waitFor for those cases.

Guilherme RosadoOP•2y 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•2y ago

Not that much usually.

Alex Lohr•2y 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 RosadoOP•2y ago

Deam Pretty neat Will check it out

Alex Lohr•2y ago

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

Guilherme RosadoOP•2y ago

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

Alex Lohr•2y ago

Happy to hear that.

Guilherme RosadoOP•2y 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•2y ago

You can use onError to check if something went amiss.

Guilherme RosadoOP•2y ago

I gave up I'll try later on 🥲

Alex Lohr•2y ago

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

Guilherme RosadoOP•2y ago

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

Alex Lohr•2y ago

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

Guilherme RosadoOP•2y ago

🙌