@noma.to/qwik-testing-library 1.5.0 → 1.5.2

package/README.md

@@ -169,56 +169,19 @@ npm install --save-dev vitest
 ```
 
 After that, we need to configure Vitest so it can run your tests.
-For this, create a _separate_ `vitest.config.ts` so you don't have to modify your project's `vite.config.ts`:
+Add the `test` section to your `vite.config.ts`:
 
 ```ts
-// vitest.config.ts
-
-import {defineConfig, mergeConfig} from "vitest/config";
-import viteConfig from "./vite.config";
-
-export default defineConfig((configEnv) =>
-  mergeConfig(
-    viteConfig(configEnv),
-    defineConfig({
-      // qwik-testing-library needs to consider your project as a Qwik lib
-      // if it's already a Qwik lib, you can remove this section
-      build: {
-        target: "es2020",
-        lib: {
-          entry: "./src/index.ts",
-          formats: ["es", "cjs"],
-          fileName: (format, entryName) =>
-            `${entryName}.qwik.${format === "es" ? "mjs" : "cjs"}`,
-        },
-      },
-      // configure your test environment
-      test: {
-        environment: "jsdom", // or "happy-dom"
-        setupFiles: [
-          "@noma.to/qwik-testing-library/setup",
-          "@testing-library/jest-dom/vitest", // optional, for DOM matchers
-        ],
-        globals: true,
-      },
-    }),
-  ),
-);
-```
-
-For now, `qwik-testing-library` needs to consider your project as a lib ([PR welcomed][prs] to simplify this).
-Hence, the `build.lib` section in the config above.
-
-As the build will try to use `./src/index.ts` as the entry point, we need to create it:
-
-```ts
-// ./src/index.ts
-
-/**
- * DO NOT DELETE THIS FILE
- *
- * This entrypoint is needed by @noma.to/qwik-testing-library to run your tests
- */
+// vite.config.ts
+
+test: {
+  environment: "jsdom", // or "happy-dom"
+  setupFiles: [
+    "@noma.to/qwik-testing-library/setup",
+    "@testing-library/jest-dom/vitest", // optional, for DOM matchers
+  ],
+  globals: true,
+},
 ```
 
 The `@noma.to/qwik-testing-library/setup` module configures Qwik globals (`qTest`, `qRuntimeQrl`, `qDev`,
@@ -327,7 +290,7 @@ Here's an example on how to use the `mock$` function:
 // import qwik-testing methods
 import {render, screen, waitFor} from "@noma.to/qwik-testing-library";
 // import qwik-mock methods
-import {mock$, clearAllMock} from "@noma.to/qwik-mock";
+import {clearAllMocks, mock$} from "@noma.to/qwik-mock";
 // import the userEvent methods to interact with the DOM
 import {userEvent} from "@testing-library/user-event";
 
@@ -337,9 +300,7 @@ import {Counter} from "./counter";
 // describe the test suite
 describe("<Counter />", () => {
   // initialize a mock
-  // note: the empty callback is required but currently unused
-  const onChangeMock = mock$(() => {
-  });
+  const onChangeMock = mock$();
 
   // setup beforeEach block to run before each test
   beforeEach(() => {
@@ -362,15 +323,25 @@ describe("<Counter />", () => {
       await user.click(decrementBtn);
 
       // assert that the onChange$ callback was called with the right value
-      // note: QRLs are async in Qwik, so we need to resolve them to verify interactions
       await waitFor(() =>
-        expect(onChangeMock.resolve()).resolves.toHaveBeenCalledWith(-1),
+        expect(onChangeMock).toHaveBeenCalledWith(-1),
       );
     });
   });
 })
 ```
 
+You can also provide a default implementation to `mock$`:
+
+```tsx
+const onSubmitMock = mock$(() => "success");
+
+await render(<SubmitForm onSubmit$={onSubmitMock} />);
+await user.click(screen.getByRole("button", { name: "Submit" }));
+
+expect(await screen.findByText("success")).toBeInTheDocument();
+```
+
 ### Qwik City - `server$` calls
 
 If one of your Qwik components uses `server$` calls, your tests might fail with a rather cryptic message (e.g. `QWIK

package/lib/lib/qwik-testing-library.qwik.cjs

@@ -55,21 +55,17 @@ async function render(ui, options = {}) {
     baseElement = document.body;
   }
   if (!container) {
-    container = baseElement.insertBefore(document.createElement("host"), baseElement.firstChild);
+    container = baseElement.insertBefore(
+      document.createElement("host"),
+      baseElement.firstChild
+    );
   }
-  const wrappedUi = !Wrapper ? ui : /* @__PURE__ */ jsxRuntime.jsx(Wrapper, {
-    children: ui
-  });
+  const wrappedUi = !Wrapper ? ui : /* @__PURE__ */ jsxRuntime.jsx(Wrapper, { children: ui });
   const doc = baseElement.ownerDocument;
   const win = doc.defaultView;
   new Function("document", "window", server.getQwikLoaderScript())(doc, win);
-  const { cleanup: cleanup2 } = await qwik.render(container, wrappedUi, {
-    serverData
-  });
-  mountedContainers.add({
-    container,
-    componentCleanup: cleanup2
-  });
+  const { cleanup: cleanup2 } = await qwik.render(container, wrappedUi, { serverData });
+  mountedContainers.add({ container, componentCleanup: cleanup2 });
   return {
     container,
     baseElement,
@@ -82,10 +78,9 @@ async function render(ui, options = {}) {
         return template.content;
       }
     },
-    debug: (el = baseElement, maxLength, options2) => Array.isArray(el) ? el.forEach((e) => console.log(dom.prettyDOM(e, maxLength, options2))) : console.log(dom.prettyDOM(el, maxLength, {
-      ...options2,
-      filterNode: () => true
-    })),
+    debug: (el = baseElement, maxLength, options2) => Array.isArray(el) ? el.forEach((e) => console.log(dom.prettyDOM(e, maxLength, options2))) : console.log(
+      dom.prettyDOM(el, maxLength, { ...options2, filterNode: () => true })
+    ),
     unmount: cleanup2,
     ...dom.getQueriesForElement(container, queries)
   };

package/lib/lib/qwik-testing-library.qwik.mjs

@@ -32,21 +32,17 @@ async function render(ui, options = {}) {
     baseElement = document.body;
   }
   if (!container) {
-    container = baseElement.insertBefore(document.createElement("host"), baseElement.firstChild);
+    container = baseElement.insertBefore(
+      document.createElement("host"),
+      baseElement.firstChild
+    );
   }
-  const wrappedUi = !Wrapper ? ui : /* @__PURE__ */ jsx(Wrapper, {
-    children: ui
-  });
+  const wrappedUi = !Wrapper ? ui : /* @__PURE__ */ jsx(Wrapper, { children: ui });
   const doc = baseElement.ownerDocument;
   const win = doc.defaultView;
   new Function("document", "window", getQwikLoaderScript())(doc, win);
-  const { cleanup: cleanup2 } = await qwik.render(container, wrappedUi, {
-    serverData
-  });
-  mountedContainers.add({
-    container,
-    componentCleanup: cleanup2
-  });
+  const { cleanup: cleanup2 } = await qwik.render(container, wrappedUi, { serverData });
+  mountedContainers.add({ container, componentCleanup: cleanup2 });
   return {
     container,
     baseElement,
@@ -59,10 +55,9 @@ async function render(ui, options = {}) {
         return template.content;
       }
     },
-    debug: (el = baseElement, maxLength, options2) => Array.isArray(el) ? el.forEach((e) => console.log(prettyDOM(e, maxLength, options2))) : console.log(prettyDOM(el, maxLength, {
-      ...options2,
-      filterNode: () => true
-    })),
+    debug: (el = baseElement, maxLength, options2) => Array.isArray(el) ? el.forEach((e) => console.log(prettyDOM(e, maxLength, options2))) : console.log(
+      prettyDOM(el, maxLength, { ...options2, filterNode: () => true })
+    ),
     unmount: cleanup2,
     ...getQueriesForElement(container, queries)
   };

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@noma.to/qwik-testing-library",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "description": "Simple and complete Qwik testing utilities that encourage good testing practices.",
   "repository": "https://github.com/ianlet/qwik-testing-library",
   "homepage": "https://github.com/ianlet/qwik-testing-library",
   "license": "MIT",
   "main": "./lib/index.qwik.mjs",
-  "qwik": "./lib/index.qwik.mjs",
   "types": "./lib-types/index.d.ts",
+  "qwik": "./lib/index.qwik.mjs",
   "exports": {
     ".": {
       "types": "./lib-types/index.d.ts",
@@ -40,16 +40,16 @@
   },
   "devDependencies": {
     "@types/eslint": "8.56.10",
-    "@types/node": "25.1.0",
-    "@typescript-eslint/eslint-plugin": "8.54.0",
-    "@typescript-eslint/parser": "8.54.0",
+    "@types/node": "25.3.3",
+    "@typescript-eslint/eslint-plugin": "8.56.1",
+    "@typescript-eslint/parser": "8.56.1",
     "eslint": "8.57.1",
     "eslint-plugin-qwik": "1.19.0",
     "prettier": "3.8.1",
     "typescript": "5.9.3",
     "undici": "*",
     "vite": "7.3.1",
-    "vite-tsconfig-paths": "^6.0.5",
+    "vite-tsconfig-paths": "^6.1.1",
     "vitest": "^4.0.18"
   },
   "peerDependencies": {