feat: fixed test setup #240

thejackshelton · 2025-03-29T03:49:30Z

What:
This PR tackles:

Fixing the immediate CI (npm run test).
Fixing the test setup globals, including JSDOM event handling, and CI type errors
Adds a smoke test to showcase Qwik support

Why:
It has been an absolute pleasure to start contributing to this library. I want to express my sincere gratitude to @kentcdodds for both being a significant inspiration and for his invaluable React teachings that have helped shape my development journey.

This PR is a small way to give back to the community, and showcasing MDX Bundler's ability to support any JSX framework.

The Qwik testing library package has been added, it would be awesome (and also fix my OCD), if the Qwik testing library can be moved under the @testing-library namespace.

How:
These changes were implemented by using Qwik testing library, along with the jsdom-global package.

jsdom-global plays a big role in other testing tools under the hood, an example being vitest which takes many of the underlying code of this package, we are able to better handle tests and also remove some ts-expect-error lines

Checklist:

Documentation
Tests
Ready to be merged

Minimal reproduction of the event issue in main without jsdom-global:

import {suite} from 'uvu'
import * as assert from 'uvu/assert'

import jsdomPkg from "jsdom";

const { JSDOM } = jsdomPkg;
const jsdom = new JSDOM("<!doctype html><html><body></body></html>");
const { window } = jsdom;

const test = suite("dummy-suite");

test('dummy test', async () => {
  const elem = window.document.createElement("input");
  window.document.body.appendChild(elem);

  elem.dispatchEvent(new Event("click"));
})

test.run()

Failed to execute 'dispatchEvent' on 'EventTarget': parameter 1 is not of type 'Event'.

Error blocking CI:

#239

…s under the hood

ianlet · 2025-03-30T13:23:25Z

Having ported and maintaining the Qwik Testing Library, I would also be happy if it could be published under the @testing-library/ namespace.

It could be nice to do it before proceeding with this PR so it follows the same package namespace as the other frameworks 👀 Let me know!

ianlet · 2025-03-30T13:31:27Z

src/__tests__/qwik.js

+    `<h1>This is the title</h1>
+<p>Here's a <!--qv --><span class="strong"><!--qv q:key q:sref=0 q:s-->neat<!--/qv--></span><!--/qv--> demo:</p>
+<!--qv --><div>mdx-bundler with Qwik's runtime!</div><!--/qv-->`
+  )


I would understand if we want to keep it that way, but to prevent having to update the test once we migrate to qwik V2, we could use queries to match the expected results instead of the raw inner html.

For example:

const element = await render( Qwik.jsx(Component, { components: { strong: SpanBold } }) ) assert.ok(element.getByRole("heading", { name: "This is the title" })) assert.ok(element.getByText("Here's a neat demo: mdx-bundler with Qwik's runtime!"))

Or something along those lines.

Yeah this should also work, since the v1 import is compatible in v2. I'll update this soon 🫡 . Appreciate the feedback!

Actually @ianlet I'm getting some linter issues from the react testing library that it's bad practice to not destructure here.

But when I try to use screen, it becomes hard to select the h1 for the qwik smoke test

Ah no worries! In any case, as we're testing the result of a transformation, it makes sense to expect the exact output. It's just that it makes this test more fragile and that we'll have to remember to come fix it as soon as Qwik internals change something (shouldn't happen often though).

kentcdodds

Thanks for this! However, I'm not certain I want to include tests for every possible framework in this package. Feels a little unnecessary and adds a burden I would rather not have.

thejackshelton · 2025-04-03T01:10:36Z

Thanks for this! However, I'm not certain I want to include tests for every possible framework in this package. Feels a little unnecessary and adds a burden I would rather not have.

Hey Kent! Completely understand.

In that case this PR can be used as inspiration to fix the test setup surrounding the existing tests 🙂 .

Let me know if you need me to update the readme. I think there is a part that mentions how mdx bundler works with multiple frameworks, perhaps we can add something in there to prevent future outstanding PR's assuming this package is trying to test agnostic capabilities.

One last thing, is there anything we can do to change the scope on the qwik testing library package from noma.to to @testing-library/qwik? It looks very out of place, and I would really like to use testing library for the agnostic vite oriented OSS projects I'm currently working on.

If not no worries, I'll have to use playwright and vitest more in that case rather than testing library 🤔

kentcdodds · 2025-04-03T15:29:20Z

If you would like to get included into the testing library org, I recommend going to the testing library Discord and asking the current maintainers whether that package can be moved into the testing library org.

I would be happy to accept this PR with some of the testing improvements that you've made without the Qwik related stuff. Thanks!

thejackshelton · 2025-04-03T16:17:37Z

If you would like to get included into the testing library org, I recommend going to the testing library Discord and asking the current maintainers whether that package can be moved into the testing library org.

I would be happy to accept this PR with some of the testing improvements that you've made without the Qwik related stuff. Thanks!

Just removed the Qwik part!

Regarding testing library, unfortunately I did not get a response from any of the maintainers. I guess I could start looking more into other test tooling.

kentcdodds

Thanks!

kentcdodds · 2025-04-03T17:05:34Z

Hmmm... The tests are failing :(

thejackshelton · 2025-04-03T17:25:58Z

Darn! I'll take a look after work

thejackshelton added 3 commits March 28, 2025 22:08

fix: test command

387348a

initial qwik test

8f1a866

fix: type errors

1eca6ce

thejackshelton marked this pull request as draft March 29, 2025 03:49

refactor: use h function

7a7a2bb

thejackshelton changed the title ~~Qwik support~~ feat: Qwik support Mar 29, 2025

thejackshelton changed the title ~~feat: Qwik support~~ feat: Qwik tests (WIP) Mar 29, 2025

thejackshelton added 13 commits March 29, 2025 13:57

feat: use jsx function for the Qwik optimizer

b88c19c

refactor: simplify import

b16efa0

update package name

5b2fb71

feat: use Qwik component instead of an inline component

1dac329

fix: mdx export

fd98dcd

refactor: jsdom and qwikloader

3277303

feat: use jsdom global to solve both the setup issues like vitest doe…

c69aae2

…s under the hood

feat: add jsdom global types

8fa972f

feat: fix jsx runtime

bbf8af3

fix: handle qwik slotted content

00ed04e

feat: test passing

f560118

refactor: add v2 note

25a537a

refactor: comment on output

a3ab8bc

thejackshelton marked this pull request as ready for review March 30, 2025 02:44

thejackshelton changed the title ~~feat: Qwik tests (WIP)~~ feat: fixed test setup & Qwik tests Mar 30, 2025

thejackshelton mentioned this pull request Mar 30, 2025

fix: test command #239

Closed

3 tasks

thejackshelton changed the title ~~feat: fixed test setup & Qwik tests~~ feat: fixed test setup, Qwik tests Mar 30, 2025

thejackshelton changed the title ~~feat: fixed test setup, Qwik tests~~ feat: Qwik tests, fixed test setup Mar 30, 2025

ianlet approved these changes Mar 30, 2025

View reviewed changes

kentcdodds reviewed Apr 3, 2025

View reviewed changes

refactor: remove qwik

8ee6e66

thejackshelton changed the title ~~feat: Qwik tests, fixed test setup~~ feat: fixed test setup Apr 3, 2025

kentcdodds added 2 commits April 3, 2025 10:57

Update package.json

63a71a2

Update package.json

d0cd216

kentcdodds approved these changes Apr 3, 2025

View reviewed changes

feat: fixed test setup #240

Are you sure you want to change the base?

feat: fixed test setup #240

Uh oh!

Conversation

thejackshelton commented Mar 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ianlet commented Mar 30, 2025

Uh oh!

ianlet Mar 30, 2025

Choose a reason for hiding this comment

Uh oh!

thejackshelton Mar 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

thejackshelton Mar 31, 2025

Choose a reason for hiding this comment

Uh oh!

ianlet Mar 31, 2025

Choose a reason for hiding this comment

Uh oh!

kentcdodds left a comment

Choose a reason for hiding this comment

Uh oh!

thejackshelton commented Apr 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kentcdodds commented Apr 3, 2025

Uh oh!

thejackshelton commented Apr 3, 2025

Uh oh!

kentcdodds left a comment

Choose a reason for hiding this comment

Uh oh!

kentcdodds commented Apr 3, 2025

Uh oh!

thejackshelton commented Apr 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

thejackshelton commented Mar 29, 2025 •

edited

Loading

thejackshelton Mar 31, 2025 •

edited

Loading

thejackshelton commented Apr 3, 2025 •

edited

Loading

thejackshelton commented Apr 3, 2025 •

edited

Loading