Skip to content

Commit 7e2ece2

Browse files
wmertenswmertens
authored
Merge pull request #7950 from sashkashishka/feature/qwik-react-tests
test: qwik react mount and unmount
2 parents d07a15f + f6369a0 commit 7e2ece2

File tree

21 files changed

+610
-1
lines changed

21 files changed

+610
-1
lines changed

‎.changeset/config.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
"insights",
1414
"@builder.io/qwik-react",
1515
"@builder.io/qwik-worker",
16-
"qwik-cli-e2e"
16+
"qwik-cli-e2e",
17+
"qwik-react-test-app"
1718
],
1819
"___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
1920
"onlyUpdatePeerDependentsWhenOutOfRange": true

‎.changeset/lemon-hands-hope.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@builder.io/qwik': patch
3+
---
4+
5+
TEST: qwik react mount and unmount

‎e2e/qwik-react-e2e/.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
playwright-report
2+
dist
3+
logs
4+
server
5+
tmp

‎e2e/qwik-react-e2e/adapters/express/vite.config.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { nodeServerAdapter } from '@builder.io/qwik-city/adapters/node-server/vite';
2+
import { extendConfig } from '@builder.io/qwik-city/vite';
3+
import baseConfig from '../../vite.config';
4+
5+
export default extendConfig(baseConfig, () => {
6+
return {
7+
build: {
8+
ssr: true,
9+
rollupOptions: {
10+
input: ['src/entry.express.tsx', '@qwik-city-plan'],
11+
},
12+
},
13+
plugins: [nodeServerAdapter({ name: 'express' })],
14+
};
15+
});

‎e2e/qwik-react-e2e/package.json‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"name": "qwik-react-test-app",
3+
"description": "Qwik react test app",
4+
"engines": {
5+
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
6+
},
7+
"private": true,
8+
"devDependencies": {
9+
"@builder.io/qwik-react": "workspace:^",
10+
"@types/react": "18.3.3",
11+
"@types/react-dom": "18.3.0",
12+
"react": "18.3.1",
13+
"react-dom": "18.3.1"
14+
},
15+
"scripts": {
16+
"build": "qwik build",
17+
"build.client": "vite build",
18+
"build.preview": "vite build --ssr src/entry.preview.tsx",
19+
"build.server": "vite build -c adapters/express/vite.config.ts",
20+
"build.types": "tsc --incremental --noEmit",
21+
"deploy": "vercel deploy",
22+
"dev": "vite --mode ssr",
23+
"dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
24+
"express": "pnpm build && pnpm serve",
25+
"fmt": "prettier --write .",
26+
"fmt.check": "prettier --check .",
27+
"lint": "eslint \"src/**/*.ts*\"",
28+
"preview": "qwik build preview && vite preview --open",
29+
"qwik": "qwik",
30+
"serve": "node server/entry.express",
31+
"start": "vite --open --mode ssr",
32+
"test": "playwright test",
33+
"test.debug": "playwright test --debug",
34+
"test.ui": "playwright test --ui"
35+
},
36+
"type": "module"
37+
}

‎e2e/qwik-react-e2e/playwright.config.ts‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { defineConfig, devices } from '@playwright/test';
2+
3+
/** See https://playwright.dev/docs/test-configuration. */
4+
export default defineConfig({
5+
testDir: './tests',
6+
fullyParallel: true,
7+
forbidOnly: !!process.env.CI,
8+
retries: process.env.CI ? 2 : 0,
9+
workers: process.env.CI ? 1 : undefined,
10+
reporter: 'line',
11+
12+
use: {
13+
baseURL: 'http://localhost:3000',
14+
// trace: 'on-first-retry',
15+
// screenshot: 'only-on-failure',
16+
17+
// Increase timeouts for service worker operations
18+
actionTimeout: 10000,
19+
navigationTimeout: 10000,
20+
},
21+
22+
// Increase global timeout for service worker tests
23+
timeout: 30000,
24+
25+
projects: [
26+
{
27+
name: 'chromium',
28+
use: {
29+
...devices['Desktop Chrome'],
30+
},
31+
},
32+
// {
33+
// name: 'firefox',
34+
// use: { ...devices['Desktop Firefox'] },
35+
// },
36+
{
37+
name: 'webkit',
38+
use: { ...devices['Desktop Safari'] },
39+
},
40+
],
41+
42+
webServer: {
43+
command: 'npm run express',
44+
port: 3000,
45+
stdout: 'pipe',
46+
reuseExistingServer: !process.env.CI,
47+
},
48+
});

‎e2e/qwik-react-e2e/src/components/counter/index.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/** @jsxImportSource react */
2+
import { useEffect, useState } from 'react';
3+
import { qwikify$ } from '@builder.io/qwik-react';
4+
5+
interface IProps {
6+
onMount(): void;
7+
onUnmount(): void;
8+
}
9+
10+
function Counter({ onMount, onUnmount }: IProps) {
11+
const [count, setCount] = useState(0);
12+
13+
useEffect(() => {
14+
onMount();
15+
return () => onUnmount();
16+
}, []);
17+
18+
return (
19+
<div data-testid="test-component">
20+
<span data-testid="count">count {count}</span>
21+
<button data-testid="inc-btn" onClick={() => setCount((v) => v + 1)}>
22+
inc
23+
</button>
24+
</div>
25+
);
26+
}
27+
28+
export const QCounter = qwikify$(Counter, { eagerness: 'hover' });

‎e2e/qwik-react-e2e/src/components/router-head/router-head.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { component$ } from '@builder.io/qwik';
2+
import { useDocumentHead, useLocation } from '@builder.io/qwik-city';
3+
4+
export const RouterHead = component$(() => {
5+
const head = useDocumentHead();
6+
const loc = useLocation();
7+
8+
return (
9+
<>
10+
<title>{head.title}</title>
11+
12+
<link rel="canonical" href={loc.url.href} />
13+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
14+
15+
{head.meta.map((m) => (
16+
<meta key={m.key} {...m} />
17+
))}
18+
19+
{head.links.map((l) => (
20+
<link key={l.key} {...l} />
21+
))}
22+
</>
23+
);
24+
});

‎e2e/qwik-react-e2e/src/entry.dev.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/*
2+
* WHAT IS THIS FILE?
3+
*
4+
* Development entry point using only client-side modules:
5+
* - Do not use this mode in production!
6+
* - No SSR
7+
* - No portion of the application is pre-rendered on the server.
8+
* - All of the application is running eagerly in the browser.
9+
* - More code is transferred to the browser than in SSR mode.
10+
* - Optimizer/Serialization/Deserialization code is not exercised!
11+
*/
12+
import { render, type RenderOptions } from '@builder.io/qwik';
13+
import Root from './root';
14+
15+
export default function (opts: RenderOptions) {
16+
return render(document, <Root />, opts);
17+
}

‎e2e/qwik-react-e2e/src/entry.express.tsx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
/*
2+
* WHAT IS THIS FILE?
3+
*
4+
* It's the entry point for the Express HTTP server when building for production.
5+
*
6+
* Learn more about Node.js server integrations here:
7+
* - https://qwik.dev/docs/deployments/node/
8+
*
9+
*/
10+
import { createQwikCity, type PlatformNode } from '@builder.io/qwik-city/middleware/node';
11+
import 'dotenv/config';
12+
import qwikCityPlan from '@qwik-city-plan';
13+
import { manifest } from '@qwik-client-manifest';
14+
import render from './entry.ssr';
15+
import express from 'express';
16+
import { fileURLToPath } from 'node:url';
17+
import { join } from 'node:path';
18+
19+
declare global {
20+
type QwikCityPlatform = PlatformNode;
21+
}
22+
23+
// Directories where the static assets are located
24+
const distDir = join(fileURLToPath(import.meta.url), '..', '..', 'dist');
25+
const buildDir = join(distDir, 'build');
26+
27+
// Allow for dynamic port
28+
const PORT = process.env.PORT ?? 3000;
29+
30+
// Create the Qwik City Node middleware
31+
const { router, notFound } = createQwikCity({
32+
render,
33+
qwikCityPlan,
34+
manifest,
35+
// getOrigin(req) {
36+
// // If deploying under a proxy, you may need to build the origin from the request headers
37+
// // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Forwarded-Proto
38+
// const protocol = req.headers["x-forwarded-proto"] ?? "http";
39+
// // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Forwarded-Host
40+
// const host = req.headers["x-forwarded-host"] ?? req.headers.host;
41+
// return `${protocol}://${host}`;
42+
// }
43+
});
44+
45+
// Create the express server
46+
// https://expressjs.com/
47+
const app = express();
48+
49+
// Enable gzip compression
50+
// app.use(compression());
51+
52+
// Static asset handlers
53+
// https://expressjs.com/en/starter/static-files.html
54+
app.use(`/build`, express.static(buildDir, { immutable: true, maxAge: '1y' }));
55+
app.use(express.static(distDir, { redirect: false }));
56+
57+
// Use Qwik City's page and endpoint request handler
58+
app.use(router);
59+
60+
// Use Qwik City's 404 handler
61+
app.use(notFound);
62+
63+
// Start the express server
64+
app.listen(PORT, () => {
65+
/* eslint-disable */
66+
console.log(`Server started: http://localhost:${PORT}/`);
67+
});

0 commit comments

Comments
 (0)