Upgrade dev dependencies

.eslintrc.js

@@ -2,7 +2,7 @@ module.exports = {
   parser: '@typescript-eslint/parser',
   parserOptions: {
     tsconfigRootDir: __dirname,
-    project: ['./packages/fastify-renderer/tsconfig.eslint.json', './packages/test-apps/tsconfig.json'],
+    project: ['./packages/fastify-renderer/tsconfig.eslint.json', './packages/test-apps/simple-react/tsconfig.json'],
   },
   settings: {
     react: {

.github/actions/setup-test-env/action.yml

@@ -26,4 +26,6 @@ runs:
 
     - name: Install dependencies
       shell: bash
-      run: pnpm install
+      run: |
+        pnpm install
+        pnpm exec playwright install

.github/workflows/ci.yml

@@ -8,21 +8,27 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x, 18.x, 20.x]
+        node-version: [18.x, 20.x]
         os: [ubuntu-latest]
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - uses: ./.github/actions/setup-test-env
       - name: Build JS
         run: pnpm build
       - name: Run Tests
         run: pnpm run test
+
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup-test-env
       - name: Run Lint
         run: pnpm run lint
 
   automerge:
-    needs: build
+    needs: [build, lint]
     runs-on: ubuntu-latest
     steps:
       - uses: fastify/github-action-merge-dependabot@v1

package.json

@@ -38,18 +38,18 @@
   },
   "devDependencies": {
     "cross-env": "^7.0.3",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-prettier": "^3.4.1",
-    "eslint-plugin-react": "^7.31.7",
+    "eslint": "^8.52.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "expect-playwright": "^0.8.0",
-    "fs-extra": "^10.1.0",
-    "jest": "^28.1.3",
-    "playwright-chromium": "^1.25.0",
-    "prettier": "^2.7.1",
-    "prettier-plugin-organize-imports": "^2.3.4",
+    "fs-extra": "^11.1.0",
+    "jest": "^29.7.0",
+    "playwright-chromium": "^1.39.0",
+    "prettier": "^2.8.8",
+    "prettier-plugin-organize-imports": "^3.2.3",
     "wds": "^0.18.1"
   },
   "pnpm": {

packages/fastify-renderer/jest.config.js

@@ -31,7 +31,7 @@ module.exports = {
   // ],
 
   // Indicates which provider should be used to instrument code for coverage
-  coverageProvider: 'v8',
+  // coverageProvider: 'v8',
 
   // A list of reporter names that Jest uses when writing coverage reports
   // coverageReporters: [

packages/fastify-renderer/package.json

@@ -54,10 +54,10 @@
     "url": "https://github.com/fastify/fastify-renderer/issues"
   },
   "engines": {
-    "node": ">= 12.0.0"
+    "node": ">= 18.0.0"
   },
   "dependencies": {
-    "@opentelemetry/api": "^1.4.0",
+    "@opentelemetry/api": "^1.6.0",
     "@vitejs/plugin-react-refresh": "^1.3.6",
     "@fastify/accepts": "^3.0.0",
     "@fastify/static": "^5.0.0",
@@ -80,8 +80,8 @@
     "@swc/core": "^1.3.95",
     "@swc/jest": "^0.2.29",
     "@types/connect": "^3.4.35",
-    "@types/jest": "^26.0.24",
-    "@types/node": "^14.17.20",
+    "@types/jest": "^29.5.6",
+    "@types/node": "^18.11.9",
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.11",
     "@types/sanitize-filename": "^1.6.3",
@@ -90,14 +90,13 @@
     "cheerio": "^1.0.0-rc.12",
     "fastify": "^3.29.0",
     "gitpkg": "^1.0.0-beta.2",
-    "jest": "^28.1.3",
-    "jest-playwright-preset": "^2.0.0",
+    "jest": "^29.7.0",
     "npm-run-all": "^4.1.5",
     "pino-pretty": "^4.8.0",
     "react": "0.0.0-experimental-4ead6b530",
     "react-dom": "0.0.0-experimental-4ead6b530",
     "rimraf": "^3.0.2",
-    "typescript": "^4.7.4"
+    "typescript": "^5.2.2"
   },
   "files": [
     "client",

packages/test-apps/simple-react/NavigationHistoryTest.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Link, useLocation } from 'fastify-renderer/client/react'
 
 const NavigationHistoryTest = () => {
-  const [path, navigate] = useLocation()
+  const [_path, navigate] = useLocation()
 
   return (
     <>

packages/test-apps/helpers.ts → packages/test-apps/simple-react/helpers.ts

@@ -20,17 +20,14 @@ export const port = 3000 + parseInt(process.env.JEST_WORKER_ID!) - 1
 export const rootURL = `http://localhost:${port}`
 
 beforeAll(async () => {
-  const testPath = expect.getState().testPath as string
+  const testPath = expect.getState().testPath!
   // eslint-disable-next-line @typescript-eslint/prefer-regexp-exec
   const testName = slash(testPath).match(/test-apps\/([\w-]+)\//)?.[1]
 
   // if this is a test placed under test-apps/xxx/test/
   // start a fastify server in that directory.
   if (testName) {
-    const testAppsRoot = resolve(__dirname, './')
-    const srcDir = resolve(testAppsRoot, testName)
-
-    const serverEntrypoint = resolve(srcDir, 'server.ts')
+    const serverEntrypoint = resolve(__dirname, 'server.ts')
     if (!fs.existsSync(serverEntrypoint)) {
       throw Error(`Missing server entrypoint file at: ${serverEntrypoint}`)
     }

packages/test-apps/simple-react/jest.config.js

@@ -31,7 +31,7 @@ module.exports = {
   // ],
 
   // Indicates which provider should be used to instrument code for coverage
-  coverageProvider: 'v8',
+  // coverageProvider: 'v8',
 
   // A list of reporter names that Jest uses when writing coverage reports
   // coverageReporters: [

packages/test-apps/simple-react/package.json

@@ -17,9 +17,15 @@
     "path-to-regexp": "^6.2.1"
   },
   "devDependencies": {
-    "@playwright/test": "^1.25.0",
+    "@playwright/test": "^1.39.0",
     "@swc/core": "^1.3.95",
     "@swc/jest": "^0.2.29",
-    "html-validator": "^5.1.18"
+    "@types/jest": "^29.5.6",
+    "@types/node": "^18.11.9",
+    "@types/react": "^17.0.43",
+    "@types/react-dom": "^17.0.11",
+    "html-validator": "^5.1.18",
+    "jest-playwright-preset": "^3.0.1",
+    "typescript": "^5.2.2"
   }
 }

packages/test-apps/simple-react/test/boot-props.spec.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test'
 import { Page } from 'playwright-chromium'
-import { newTestPage, reactReady, rootURL } from '../../helpers'
+import { newTestPage, reactReady, rootURL } from '../helpers'
 
 describe('boot props', () => {
   let page: Page

packages/test-apps/simple-react/test/imperative-rendering.spec.ts

@@ -1,5 +1,5 @@
 import { Page } from 'playwright-chromium'
-import { newTestPage, reactReady, rootURL } from '../../helpers'
+import { newTestPage, reactReady, rootURL } from '../helpers'
 
 describe('imperative rendering', () => {
   let page: Page

packages/test-apps/simple-react/test/navigation-details.spec.ts

@@ -1,5 +1,5 @@
 import { Page } from 'playwright-chromium'
-import { newTestPage, reactReady, rootURL } from '../../helpers'
+import { newTestPage, reactReady, rootURL } from '../helpers'
 
 describe('navigation details', () => {
   let page: Page
@@ -14,6 +14,9 @@ describe('navigation details', () => {
     await page.click('#home-link')
 
     const testCalls: any[] = await page.evaluate('window.test')
+
+    await page.waitForFunction(() => window.test.length === 2)
+
     expect(testCalls).toBeDefined()
     expect(testCalls).toHaveLength(2)
     expect(testCalls[0].isNavigating).toBe(false)
@@ -31,6 +34,8 @@ describe('navigation details', () => {
 
     await page.click('#section-link')
 
+    await page.waitForFunction(() => window.test.length === 3)
+
     const testCalls: any[] = await page.evaluate('window.test')
     expect(testCalls).toBeDefined()
     expect(testCalls[0].isNavigating).toBe(false)
@@ -46,6 +51,8 @@ describe('navigation details', () => {
     await page.goto(`${rootURL}/navigation-test?foo=bar#section`)
     await reactReady(page)
 
+    await page.waitForFunction(() => window.test.length === 3)
+
     const testCalls: any[] = await page.evaluate('window.test')
     expect(testCalls).toBeDefined()
     expect(testCalls).toHaveLength(3)

packages/test-apps/simple-react/test/navigation-history.spec.ts

@@ -1,5 +1,5 @@
 import { Page } from 'playwright-chromium'
-import { newTestPage, reactReady, rootURL } from '../../helpers'
+import { newTestPage, reactReady, rootURL } from '../helpers'
 
 describe('navigation details', () => {
   let page: Page

packages/test-apps/simple-react/test/serve.spec.ts

@@ -1,6 +1,6 @@
 import validator from 'html-validator'
 import { Page } from 'playwright-chromium'
-import { newTestPage, reactReady, rootURL } from '../../helpers'
+import { newTestPage, reactReady, rootURL } from '../helpers'
 
 describe('simple-react', () => {
   let page: Page

packages/test-apps/simple-react/test/switching-contexts.spec.ts

@@ -1,5 +1,5 @@
 import { Page } from 'playwright-chromium'
-import { newTestPage, reactReady, rootURL } from '../../helpers'
+import { newTestPage, reactReady, rootURL } from '../helpers'
 
 describe('navigation details', () => {
   let page: Page
@@ -8,6 +8,7 @@ describe('navigation details', () => {
     page = await newTestPage()
     await page.goto(`${rootURL}`)
     await reactReady(page)
+    await page.waitForLoadState('networkidle')
   })
 
   test('navigating between pages of the same context doesnt trigger a server side render request', async () => {

packages/test-apps/simple-react/test/use-custom-template.spec.ts

@@ -1,5 +1,5 @@
 import { Page } from 'playwright-chromium'
-import { newTestPage, reactReady, rootURL } from '../../helpers'
+import { newTestPage, reactReady, rootURL } from '../helpers'
 
 describe('Custom Template', () => {
   let page: Page

packages/test-apps/simple-react/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": ["."],
+  "exclude": ["**/node_modules", "**/dist/**"],
+  "compilerOptions": {
+    "target": "ES2019",
+    "module": "commonjs",
+    "lib": ["ES2020", "dom"],
+    "sourceMap": true,
+    "types": [
+      "jest",
+      "node",
+      "jest-playwright-preset",
+      "expect-playwright",
+      "../../fastify-renderer/src/node/stream-template.d.ts"
+    ]
+  }
+}