Skip to content

Commit c837f33

Browse files
ianletianlet
committed
fix: make qwik-testing-library agnostic from vitest runner
As `mock$` is currently relying on `vi.fn()` from `vitest` to create mock functions, we cannot make it part of `qwik-testing-library` to provide mocking utilities. We need to extract it as a separate lib. BREAKING CHANGE: extract qwik-mock from qwik-testing-library as a separate lib
1 parent c4948c8 commit c837f33

File tree

17 files changed

+303
-27
lines changed

17 files changed

+303
-27
lines changed

‎.github/workflows/ci.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ jobs:
5454
run: |
5555
pnpm install
5656
pnpm --filter "{packages/qwik-testing-library}" install @builder.io/qwik@${{ matrix.qwik }}
57+
pnpm --filter "{packages/qwik-mock}" install @builder.io/qwik@${{ matrix.qwik }}
5758
pnpm --filter "{apps/qwik-testing-library-e2e-tests}" install @builder.io/qwik@${{ matrix.qwik }}
5859
5960
- name: ▶️ Run ${{ matrix.check }}

‎README.md

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -318,17 +318,27 @@ describe("<Counter />", () => {
318318
> This feature is under a testing phase and thus experimental.
319319
> Its API may change in the future, so use it at your own risk.
320320
321-
The Qwik Testing Library provides a `mock$` function
321+
#### Setup
322+
323+
Optionally, you can install `@noma.to/qwik-mock` to mock callbacks of Qwik components. It provides a `mock$` function
322324
that can be used to create a mock of a QRL and verify interactions on your Qwik components.
323325

326+
```shell
327+
npm install --save-dev @noma.to/qwik-mock
328+
```
329+
324330
It is _not_ a replacement of regular mocking functions (such as `vi.fn` and `vi.mock`) as its intended use is only for
325331
testing callbacks of Qwik components.
326332

333+
#### Usage
334+
327335
Here's an example on how to use the `mock$` function:
328336

329337
```tsx title="counter.spec.tsx"
330338
// import qwik-testing methods
331-
import {mock$, clearAllMock, render, screen, waitFor} from "@noma.to/qwik-testing-library";
339+
import {render, screen, waitFor} from "@noma.to/qwik-testing-library";
340+
// import qwik-mock methods
341+
import {mock$, clearAllMock} from "@noma.to/qwik-mock";
332342
// import the userEvent methods to interact with the DOM
333343
import {userEvent} from "@testing-library/user-event";
334344

‎apps/qwik-testing-library-e2e-tests/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
"devDependencies": {
3939
"@builder.io/qwik": "^1.12.1",
4040
"@noma.to/qwik-testing-library": "workspace:*",
41+
"@noma.to/qwik-mock": "workspace:*",
4142
"@testing-library/jest-dom": "^6.6.3",
4243
"@testing-library/user-event": "^14.6.1",
4344
"@types/eslint": "8.56.10",

‎apps/qwik-testing-library-e2e-tests/src/components/counter.spec.tsx

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
1-
import {
2-
clearAllMocks,
3-
mock$,
4-
render,
5-
screen,
6-
waitFor,
7-
} from "@noma.to/qwik-testing-library";
8-
import { Counter } from "./counter";
1+
import { render, screen, waitFor } from "@noma.to/qwik-testing-library";
2+
import { clearAllMocks, mock$ } from "@noma.to/qwik-mock";
93
import { userEvent } from "@testing-library/user-event";
4+
import { Counter } from "./counter";
105

116
describe("<Counter />", () => {
127
const onChangeMock = mock$(() => {});

‎package.json

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@
1111
"validate": "pnpm -r lint && pnpm -r validate",
1212
"contributors:add": "all-contributors add",
1313
"contributors:generate": "all-contributors generate",
14-
"build": "pnpm --filter '{packages/qwik-testing-library}' run build",
15-
"release:prepare": "pnpm --filter '{packages/qwik-testing-library}' run build && cp README.md packages/qwik-testing-library/README.md && cp LICENSE packages/qwik-testing-library/LICENSE",
16-
"release": "pnpm --filter '{packages/qwik-testing-library}' --workspace-concurrency=1 exec -- npx --no-install semantic-release -e semantic-release-monorepo",
14+
"build": "pnpm --filter '{packages/**}' run build",
15+
"release:prepare": "pnpm --filter '{packages/**}' run build && cp README.md packages/qwik-testing-library/README.md && cp LICENSE packages/qwik-testing-library/LICENSE && cp LICENSE packages/qwik-mock/LICENSE",
16+
"release": "pnpm --filter '{packages/**}' --workspace-concurrency=1 exec -- npx --no-install semantic-release -e semantic-release-monorepo",
1717
"prepare": "husky"
1818
},
1919
"keywords": [
@@ -28,6 +28,8 @@
2828
"functional",
2929
"end-to-end",
3030
"e2e",
31+
"mock",
32+
"mocking",
3133
"vitest"
3234
],
3335
"license": "MIT",

‎packages/qwik-mock/.eslintignore

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
**/*.log
2+
**/.DS_Store
3+
*.
4+
.vscode/settings.json
5+
.history
6+
.yarn
7+
bazel-*
8+
bazel-bin
9+
bazel-out
10+
bazel-qwik
11+
bazel-testlogs
12+
dist
13+
dist-dev
14+
lib
15+
lib-types
16+
etc
17+
external
18+
node_modules
19+
temp
20+
tsc-out
21+
tsdoc-metadata.json
22+
target
23+
output
24+
rollup.config.js
25+
build
26+
.cache
27+
.vscode
28+
.rollup.cache
29+
dist
30+
tsconfig.tsbuildinfo
31+
vite.config.ts

‎packages/qwik-mock/.eslintrc.cjs

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
module.exports = {
2+
root: true,
3+
env: {
4+
browser: true,
5+
es2021: true,
6+
node: true,
7+
},
8+
extends: [
9+
"eslint:recommended",
10+
"plugin:@typescript-eslint/recommended",
11+
"plugin:qwik/recommended",
12+
],
13+
parser: "@typescript-eslint/parser",
14+
parserOptions: {
15+
tsconfigRootDir: __dirname,
16+
project: ["./tsconfig.json"],
17+
ecmaVersion: 2021,
18+
sourceType: "module",
19+
ecmaFeatures: {
20+
jsx: true,
21+
},
22+
},
23+
plugins: ["@typescript-eslint"],
24+
rules: {
25+
"@typescript-eslint/no-explicit-any": "off",
26+
"@typescript-eslint/explicit-module-boundary-types": "off",
27+
"@typescript-eslint/no-inferrable-types": "off",
28+
"@typescript-eslint/no-non-null-assertion": "off",
29+
"@typescript-eslint/no-empty-interface": "off",
30+
"@typescript-eslint/no-namespace": "off",
31+
"@typescript-eslint/no-empty-function": "off",
32+
"@typescript-eslint/no-this-alias": "off",
33+
"@typescript-eslint/ban-types": "off",
34+
"@typescript-eslint/ban-ts-comment": "off",
35+
"prefer-spread": "off",
36+
"no-case-declarations": "off",
37+
"no-console": "off",
38+
"@typescript-eslint/no-unused-vars": ["error"],
39+
},
40+
};

‎packages/qwik-mock/.gitignore

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Build
2+
/dist
3+
/lib
4+
/lib-types
5+
/server
6+
7+
# Development
8+
node_modules
9+
10+
# Cache
11+
.cache
12+
.mf
13+
.vscode
14+
.rollup.cache
15+
tsconfig.tsbuildinfo
16+
17+
# Logs
18+
logs
19+
*.log
20+
npm-debug.log*
21+
yarn-debug.log*
22+
yarn-error.log*
23+
pnpm-debug.log*
24+
lerna-debug.log*
25+
26+
# Editor
27+
!.vscode/extensions.json
28+
.idea
29+
.DS_Store
30+
*.suo
31+
*.ntvs*
32+
*.njsproj
33+
*.sln
34+
*.sw?
35+
36+
# Yarn
37+
.yarn/*
38+
!.yarn/releases

‎packages/qwik-mock/.prettierignore

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Files Prettier should not format
2+
**/*.log
3+
**/.DS_Store
4+
*.
5+
dist
6+
node_modules

‎packages/qwik-mock/README.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# Qwik Mock
2+
3+
Qwik Mock is a small utility to mock Qwik QRLs. It is currently experimental and should be used with caution.
4+
5+
Head over to [qtl-docs-repo] to learn how to use it.
6+
7+
[qtl-docs-repo]: https://github.com/ianlet/qwik-testing-library/blob/main/README.md
8+

‎packages/qwik-mock/package.json

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
{
2+
"name": "@noma.to/qwik-mock",
3+
"version": "0.0.0-semantically-released",
4+
"description": "Small utility to mock Qwik QRLs",
5+
"repository": "https://github.com/ianlet/qwik-testing-library",
6+
"homepage": "https://github.com/ianlet/qwik-testing-library",
7+
"license": "MIT",
8+
"main": "./lib/index.qwik.mjs",
9+
"qwik": "./lib/index.qwik.mjs",
10+
"types": "./lib-types/index.d.ts",
11+
"exports": {
12+
".": {
13+
"types": "./lib-types/index.d.ts",
14+
"import": "./lib/index.qwik.mjs",
15+
"require": "./lib/index.qwik.cjs"
16+
}
17+
},
18+
"files": [
19+
"lib",
20+
"lib-types"
21+
],
22+
"engines": {
23+
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
24+
},
25+
"private": false,
26+
"type": "module",
27+
"scripts": {
28+
"build": "pnpm build.lib && pnpm build.types",
29+
"build.lib": "vite build --mode lib",
30+
"build.types": "tsc --emitDeclarationOnly",
31+
"fmt": "prettier --write .",
32+
"fmt.check": "prettier --check .",
33+
"lint": "eslint \"src/**/*.ts*\"",
34+
"validate": "pnpm build"
35+
},
36+
"devDependencies": {
37+
"@types/eslint": "8.56.10",
38+
"@types/node": "22.13.8",
39+
"@typescript-eslint/eslint-plugin": "8.28.0",
40+
"@typescript-eslint/parser": "8.28.0",
41+
"eslint": "8.57.1",
42+
"eslint-plugin-qwik": "1.12.1",
43+
"prettier": "3.5.3",
44+
"typescript": "5.8.2",
45+
"undici": "*",
46+
"vite": "6.2.3",
47+
"vite-tsconfig-paths": "^5.1.4",
48+
"vitest": "^3.0.9"
49+
},
50+
"peerDependencies": {
51+
"@builder.io/qwik": ">= 1.12.0 < 2"
52+
}
53+
}

‎packages/qwik-mock/src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./lib/qwik-mock";

‎packages/qwik-testing-library/src/lib/mock.ts renamed to ‎packages/qwik-mock/src/lib/qwik-mock.ts

File renamed without changes.

‎packages/qwik-mock/tsconfig.json

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"compilerOptions": {
3+
"allowJs": true,
4+
"target": "ES2017",
5+
"module": "ES2020",
6+
"lib": ["es2020", "DOM"],
7+
"jsx": "react-jsx",
8+
"jsxImportSource": "@builder.io/qwik",
9+
"strict": true,
10+
"declaration": true,
11+
"declarationDir": "lib-types",
12+
"resolveJsonModule": true,
13+
"moduleResolution": "Bundler",
14+
"esModuleInterop": true,
15+
"skipLibCheck": true,
16+
"incremental": true,
17+
"isolatedModules": true,
18+
"types": ["vite/client"]
19+
},
20+
"include": ["src"]
21+
}

‎packages/qwik-mock/vite.config.ts

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { defineConfig } from "vite";
2+
import pkg from "./package.json";
3+
import { qwikVite } from "@builder.io/qwik/optimizer";
4+
import tsconfigPaths from "vite-tsconfig-paths";
5+
6+
const { dependencies = {}, peerDependencies = {} } = pkg as any;
7+
const makeRegex = (dep) => new RegExp(`^${dep}(/.*)?$`);
8+
const excludeAll = (obj) => Object.keys(obj).map(makeRegex);
9+
10+
export default defineConfig(() => {
11+
return {
12+
build: {
13+
target: "es2020",
14+
lib: {
15+
entry: "./src/index.ts",
16+
formats: ["es", "cjs"],
17+
fileName: (format, entryName) =>
18+
`${entryName}.qwik.${format === "es" ? "mjs" : "cjs"}`,
19+
},
20+
rollupOptions: {
21+
output: {
22+
preserveModules: true,
23+
preserveModulesRoot: "src",
24+
},
25+
// externalize deps that shouldn't be bundled into the library
26+
external: [
27+
/^node:.*/,
28+
...excludeAll(dependencies),
29+
...excludeAll(peerDependencies),
30+
],
31+
},
32+
},
33+
plugins: [qwikVite(), tsconfigPaths()],
34+
};
35+
});

‎packages/qwik-testing-library/src/lib/qwik-testing-library.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { getQueriesForElement, prettyDOM } from "@testing-library/dom";
22
import { JSXOutput } from "@builder.io/qwik";
33
import type { ComponentRef, Options, Result } from "./types";
4-
import { clearAllMocks, mock$, mockQrl } from "./mock";
54
import { qwikLoader } from "./qwikloader";
65

76
// if we're running in a test runner that supports afterEach
@@ -87,4 +86,4 @@ function cleanup() {
8786
}
8887

8988
export * from "@testing-library/dom";
90-
export { cleanup, render, mock$, mockQrl, clearAllMocks };
89+
export { cleanup, render };

0 commit comments

Comments
 (0)