add e2e test

Author: schiller-manuel

e2e/react-start/serialization-adapters/.gitignore

@@ -0,0 +1,20 @@
+node_modules
+package-lock.json
+yarn.lock
+
+.DS_Store
+.cache
+.env
+.vercel
+.output
+/build/
+/api/
+/server/build
+/public/build# Sentry Config File
+.env.sentry-build-plugin
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+
+count.txt

e2e/react-start/serialization-adapters/.prettierignore

@@ -0,0 +1,4 @@
+**/build
+**/public
+pnpm-lock.yaml
+routeTree.gen.ts

e2e/react-start/serialization-adapters/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "tanstack-react-start-e2e-serialization-adapters",
+  "private": true,
+  "sideEffects": false,
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev --port 3000",
+    "dev:e2e": "vite dev",
+    "build": "vite build && tsc --noEmit",
+    "start": "pnpx srvx --prod dist/server.js",
+    "test:e2e": "rm -rf port*.txt; playwright test --project=chromium"
+  },
+  "dependencies": {
+    "@tanstack/react-router": "workspace:^",
+    "@tanstack/react-router-devtools": "workspace:^",
+    "@tanstack/react-start": "workspace:^",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "vite": "^7.1.1",
+    "vite-tsconfig-paths": "^5.1.4",
+    "zod": "^3.24.2"
+  },
+  "devDependencies": {
+    "@tanstack/router-e2e-utils": "workspace:^",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "postcss": "^8.5.1",
+    "srvx": "^0.8.6",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.7.2"
+  }
+}

e2e/react-start/serialization-adapters/playwright.config.ts

@@ -0,0 +1,34 @@
+import { defineConfig, devices } from '@playwright/test'
+import { getTestServerPort } from '@tanstack/router-e2e-utils'
+import packageJson from './package.json' with { type: 'json' }
+
+const PORT = await getTestServerPort(packageJson.name)
+const baseURL = `http://localhost:${PORT}`
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  workers: 1,
+
+  reporter: [['line']],
+
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL,
+  },
+
+  webServer: {
+    command: `VITE_SERVER_PORT=${PORT} pnpm build && NODE_ENV=production PORT=${PORT} VITE_SERVER_PORT=${PORT} pnpm start`,
+    url: baseURL,
+    reuseExistingServer: !process.env.CI,
+    stdout: 'pipe',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+})

e2e/react-start/serialization-adapters/postcss.config.mjs

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

e2e/react-start/serialization-adapters/src/data.tsx

@@ -0,0 +1,127 @@
+import { createSerializationAdapter } from '@tanstack/react-router'
+
+export class Foo {
+  constructor(public value: string) {}
+}
+
+export interface Car {
+  __type: 'car'
+  make: string
+  model: string
+  year: number
+  honk: () => { message: string; make: string; model: string; year: number }
+}
+
+export function makeCar(opts: {
+  make: string
+  model: string
+  year: number
+}): Car {
+  return {
+    ...opts,
+    __type: 'car',
+    honk: () => {
+      return { message: `Honk! Honk!`, ...opts }
+    },
+  }
+}
+
+export const fooAdapter = createSerializationAdapter({
+  key: 'foo',
+  test: (value: any) => value instanceof Foo,
+  toSerializable: (foo) => foo.value,
+  fromSerializable: (value) => new Foo(value),
+})
+
+export const carAdapter = createSerializationAdapter({
+  key: 'car',
+  test: (value: any): value is Car =>
+    '__type' in (value as Car) && value.__type === 'car',
+  toSerializable: (car) => ({
+    make: car.make,
+    model: car.model,
+    year: car.year,
+  }),
+  fromSerializable: (value: { make: string; model: string; year: number }) =>
+    makeCar(value),
+})
+
+export function makeData() {
+  function makeFoo(suffix: string = '') {
+    return new Foo(typeof window === 'undefined' ? 'server' : 'client' + suffix)
+  }
+  return {
+    foo: {
+      singleInstance: makeFoo(),
+      array: [makeFoo('0'), makeFoo('1'), makeFoo('2')],
+      map: new Map([
+        [0, makeFoo('0')],
+        [1, makeFoo('1')],
+        [2, makeFoo('2')],
+      ]),
+      mapOfArrays: new Map([
+        [0, [makeFoo('0-a'), makeFoo('0-b')]],
+        [1, [makeFoo('1-a'), makeFoo('1-b')]],
+        [2, [makeFoo('2-a'), makeFoo('2-b')]],
+      ]),
+    },
+    car: {
+      singleInstance: makeCar({
+        make: 'Toyota',
+        model: 'Camry',
+        year: 2020,
+      }),
+      array: [
+        makeCar({ make: 'Honda', model: 'Accord', year: 2019 }),
+        makeCar({ make: 'Ford', model: 'Mustang', year: 2021 }),
+      ],
+      map: new Map([
+        [0, makeCar({ make: 'Chevrolet', model: 'Malibu', year: 2018 })],
+        [1, makeCar({ make: 'Nissan', model: 'Altima', year: 2020 })],
+        [2, makeCar({ make: 'Hyundai', model: 'Sonata', year: 2021 })],
+      ]),
+      mapOfArrays: new Map([
+        [0, [makeCar({ make: 'Kia', model: 'Optima', year: 2019 })]],
+        [1, [makeCar({ make: 'Subaru', model: 'Legacy', year: 2020 })]],
+        [2, [makeCar({ make: 'Volkswagen', model: 'Passat', year: 2021 })]],
+      ]),
+    },
+  }
+}
+
+export function RenderData({
+  id,
+  data,
+}: {
+  id: string
+  data: ReturnType<typeof makeData>
+}) {
+  const localData = makeData()
+  return (
+    <div data-testid={`${id}-container`}>
+      <h3>Car</h3>
+      <h4>expected</h4>
+      <div data-testid={`${id}-car-expected`}>
+        {JSON.stringify({
+          make: localData.car.singleInstance.make,
+          model: localData.car.singleInstance.model,
+          year: localData.car.singleInstance.year,
+        })}
+      </div>
+      <h4>actual</h4>
+      <div data-testid={`${id}-car-actual`}>
+        {JSON.stringify({
+          make: data.car.singleInstance.make,
+          model: data.car.singleInstance.model,
+          year: data.car.singleInstance.year,
+        })}
+      </div>
+      <b>Foo</b>
+      <div data-testid={`${id}-foo`}>
+        {JSON.stringify({
+          value: data.foo.singleInstance.value,
+        })}
+      </div>
+    </div>
+  )
+}

e2e/react-start/serialization-adapters/src/routeTree.gen.ts

@@ -0,0 +1,110 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as StreamRouteImport } from './routes/stream'
+import { Route as DataOnlyRouteImport } from './routes/data-only'
+import { Route as SsrRouteImport } from './routes/_ssr'
+import { Route as IndexRouteImport } from './routes/index'
+
+const StreamRoute = StreamRouteImport.update({
+  id: '/stream',
+  path: '/stream',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const DataOnlyRoute = DataOnlyRouteImport.update({
+  id: '/data-only',
+  path: '/data-only',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const SsrRoute = SsrRouteImport.update({
+  id: '/_ssr',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/data-only': typeof DataOnlyRoute
+  '/stream': typeof StreamRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/data-only': typeof DataOnlyRoute
+  '/stream': typeof StreamRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/_ssr': typeof SsrRoute
+  '/data-only': typeof DataOnlyRoute
+  '/stream': typeof StreamRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/data-only' | '/stream'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/data-only' | '/stream'
+  id: '__root__' | '/' | '/_ssr' | '/data-only' | '/stream'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  SsrRoute: typeof SsrRoute
+  DataOnlyRoute: typeof DataOnlyRoute
+  StreamRoute: typeof StreamRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/stream': {
+      id: '/stream'
+      path: '/stream'
+      fullPath: '/stream'
+      preLoaderRoute: typeof StreamRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/data-only': {
+      id: '/data-only'
+      path: '/data-only'
+      fullPath: '/data-only'
+      preLoaderRoute: typeof DataOnlyRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/_ssr': {
+      id: '/_ssr'
+      path: ''
+      fullPath: ''
+      preLoaderRoute: typeof SsrRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  SsrRoute: SsrRoute,
+  DataOnlyRoute: DataOnlyRoute,
+  StreamRoute: StreamRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()

e2e/react-start/serialization-adapters/src/router.tsx

@@ -0,0 +1,19 @@
+import { createRouter as createTanStackRouter } from '@tanstack/react-router'
+import { routeTree } from './routeTree.gen'
+import { carAdapter, fooAdapter } from './data'
+
+export function createRouter() {
+  const router = createTanStackRouter({
+    routeTree,
+    scrollRestoration: true,
+    serializationAdapters: [fooAdapter, carAdapter],
+  })
+
+  return router
+}
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: ReturnType<typeof createRouter>
+  }
+}