reuse playwright tests for integration tests of React Router and TanS…

…tack (#426)

* move playwright tests into separate folder

* tag tests, hook script up

* fix config for knip

* rename route

* first tests

* run tanstack tests in CI

* QueryRef tests wih `preloadQuery`

* add `preloadQuery` `useReadQuery` tests

* run integration tests against TanStack deployment on Vercel

* annotate a test

* another test

* bump react-router to newest template, add vercel preset

* update config, add log message

* apply vercel-specific options

* first react-router tests

* run tests in CI

* update package json name

* fix review comment

.github/workflows/tests.yml

@@ -116,6 +116,18 @@ jobs:
       - name: "Next.js: Test"
         run: yarn workspace @integration-test/nextjs run test | tee $GITHUB_STEP_SUMMARY; exit ${PIPESTATUS[0]}
 
+      - name: "TanStack Start: Build"
+        run: yarn workspace @integration-test/tanstack-start run build
+
+      - name: "TanStack Start: Test"
+        run: yarn workspace @integration-test/tanstack-start run test | tee $GITHUB_STEP_SUMMARY; exit ${PIPESTATUS[0]}
+
+      - name: "React Router: Build"
+        run: yarn workspace @integration-test/react-router run build
+
+      - name: "React Router: Test"
+        run: yarn workspace @integration-test/react-router run test | tee $GITHUB_STEP_SUMMARY; exit ${PIPESTATUS[0]}
+
       - name: "Vite Streaming: Build"
         run: yarn workspace @integration-test/vite-streaming run build
       - name: "Vite Streaming: Test"

.github/workflows/vercel-integration.yml

@@ -10,9 +10,14 @@ jobs:
         run: echo 'Deployment status is ${{ toJSON(github.event.deployment_status) }}'
 
   run-next-e2e:
-    if: github.event_name == 'deployment_status' && github.event.deployment_status.state == 'success' && github.event.deployment_status.environment == 'Preview – apollo__experimental-nextjs-app-support'
+    if: |
+      github.event_name == 'deployment_status' && github.event.deployment_status.state == 'success' && (
+        github.event.deployment_status.environment == 'Preview – apollo__experimental-nextjs-app-support' ||
+        github.event.deployment_status.environment == 'Preview – apollo__client-integration-react-router' ||
+        github.event.deployment_status.environment == 'Preview – apollo__client-integration-tanstack-start'
+      )
     runs-on: ubuntu-latest
-    name: Run Playwright tests against Vercel deployment
+    name: Run Playwright tests against Vercel deployment ${{ github.event.deployment_status.environment }}
     steps:
       - uses: actions/checkout@v2
       - uses: actions/checkout@v4
@@ -39,7 +44,20 @@ jobs:
       - run: npx playwright install-deps
         if: steps.playwright-cache.outputs.cache-hit == 'true'
 
-      - name: "Run Playwright tests against Vercel deployment"
+      - name: "Run Playwright tests against Vercel deployment - Next.js"
+        if: github.event.deployment_status.environment == 'Preview – apollo__experimental-nextjs-app-support'
         run: yarn workspace @integration-test/nextjs run test | tee $GITHUB_STEP_SUMMARY; exit ${PIPESTATUS[0]}
         env:
           BASE_URL: ${{ github.event.deployment_status.environment_url }}
+
+      - name: "Run Playwright tests against Vercel deployment - TanStack Start"
+        if: github.event.deployment_status.environment == 'Preview – apollo__client-integration-tanstack-start'
+        run: yarn workspace @integration-test/tanstack-start run test | tee $GITHUB_STEP_SUMMARY; exit ${PIPESTATUS[0]}
+        env:
+          BASE_URL: ${{ github.event.deployment_status.environment_url }}
+
+      - name: "Run Playwright tests against Vercel deployment - React Router"
+        if: github.event.deployment_status.environment == 'Preview – apollo__client-integration-react-router'
+        run: yarn workspace @integration-test/react-router run test | tee $GITHUB_STEP_SUMMARY; exit ${PIPESTATUS[0]}
+        env:
+          BASE_URL: ${{ github.event.deployment_status.environment_url }}

.yarn/patches/react-router-npm-7.1.5-9668fa2213.patch

@@ -0,0 +1,112 @@
+diff --git a/dist/development/lib/types/route-module.d.mts b/dist/development/lib/types/route-module.d.mts
+index 65548f5090c95d9a8a34f916306d3b9d6bff4250..bf88cb4f4f1fa1c9576913efc3c9d230a5315de0 100644
+--- a/dist/development/lib/types/route-module.d.mts
++++ b/dist/development/lib/types/route-module.d.mts
+@@ -1,7 +1,9 @@
+ import { ay as LinkDescriptor, av as MetaDescriptor, aM as ServerDataFrom, aN as ClientDataFrom, aO as Func, aP as Equal, aQ as Pretty } from '../../route-data-Cq_b5feC.mjs';
+ import { A as AppLoadContext } from '../../data-CQbyyGzl.mjs';
+ import 'react';
+-
++export type SerializesTo<T> = {
++    $__RR_SerializesTo?: [T];
++};
+ type IsDefined<T> = Equal<T, undefined> extends true ? false : true;
+ type RouteModule = {
+     meta?: Func;
+diff --git a/dist/development/lib/types/route-module.d.ts b/dist/development/lib/types/route-module.d.ts
+index a8b932c982cbf7935cdf5402cb844c118a2b9e79..5f9d3fbb1f79c680b3f3ba5f06caee2268ee34fd 100644
+--- a/dist/development/lib/types/route-module.d.ts
++++ b/dist/development/lib/types/route-module.d.ts
+@@ -1,7 +1,9 @@
+ import { ay as LinkDescriptor, av as MetaDescriptor, aM as ServerDataFrom, aN as ClientDataFrom, aO as Func, aP as Equal, aQ as Pretty } from '../../route-data-Cq_b5feC.js';
+ import { A as AppLoadContext } from '../../data-CQbyyGzl.js';
+ import 'react';
+-
++export type SerializesTo<T> = {
++    $__RR_SerializesTo?: [T];
++};
+ type IsDefined<T> = Equal<T, undefined> extends true ? false : true;
+ type RouteModule = {
+     meta?: Func;
+diff --git a/dist/development/route-data-Cq_b5feC.d.mts b/dist/development/route-data-Cq_b5feC.d.mts
+index a44077c379d51d720dc5539ef006d105657d673c..e5a646b097b82714a739fec8510d13bf09207699 100644
+--- a/dist/development/route-data-Cq_b5feC.d.mts
++++ b/dist/development/route-data-Cq_b5feC.d.mts
+@@ -1564,7 +1564,7 @@ type Pretty<T> = {
+     [K in keyof T]: T[K];
+ } & {};
+
+-type Serialize<T> = T extends Serializable ? T : T extends (...args: any[]) => unknown ? undefined : T extends Promise<infer U> ? Promise<Serialize<U>> : T extends Map<infer K, infer V> ? Map<Serialize<K>, Serialize<V>> : T extends Set<infer U> ? Set<Serialize<U>> : T extends [] ? [] : T extends readonly [infer F, ...infer R] ? [Serialize<F>, ...Serialize<R>] : T extends Array<infer U> ? Array<Serialize<U>> : T extends readonly unknown[] ? readonly Serialize<T[number]>[] : T extends Record<any, any> ? {
++type Serialize<T> = T extends import('./lib/types/route-module.mjs').SerializesTo<infer To> ? To : T extends Serializable ? T : T extends (...args: any[]) => unknown ? undefined : T extends Promise<infer U> ? Promise<Serialize<U>> : T extends Map<infer K, infer V> ? Map<Serialize<K>, Serialize<V>> : T extends Set<infer U> ? Set<Serialize<U>> : T extends [] ? [] : T extends readonly [infer F, ...infer R] ? [Serialize<F>, ...Serialize<R>] : T extends Array<infer U> ? Array<Serialize<U>> : T extends readonly unknown[] ? readonly Serialize<T[number]>[] : T extends Record<any, any> ? {
+     [K in keyof T]: Serialize<T[K]>;
+ } : undefined;
+ type VoidToUndefined<T> = Equal<T, void> extends true ? undefined : T;
+diff --git a/dist/development/route-data-Cq_b5feC.d.ts b/dist/development/route-data-Cq_b5feC.d.ts
+index a44077c379d51d720dc5539ef006d105657d673c..ac555685ba76cc74c6052517fa03ca632e03ba75 100644
+--- a/dist/development/route-data-Cq_b5feC.d.ts
++++ b/dist/development/route-data-Cq_b5feC.d.ts
+@@ -1564,7 +1564,7 @@ type Pretty<T> = {
+     [K in keyof T]: T[K];
+ } & {};
+
+-type Serialize<T> = T extends Serializable ? T : T extends (...args: any[]) => unknown ? undefined : T extends Promise<infer U> ? Promise<Serialize<U>> : T extends Map<infer K, infer V> ? Map<Serialize<K>, Serialize<V>> : T extends Set<infer U> ? Set<Serialize<U>> : T extends [] ? [] : T extends readonly [infer F, ...infer R] ? [Serialize<F>, ...Serialize<R>] : T extends Array<infer U> ? Array<Serialize<U>> : T extends readonly unknown[] ? readonly Serialize<T[number]>[] : T extends Record<any, any> ? {
++type Serialize<T> = T extends import('./lib/types/route-module.js').SerializesTo<infer To> ? To : T extends Serializable ? T : T extends (...args: any[]) => unknown ? undefined : T extends Promise<infer U> ? Promise<Serialize<U>> : T extends Map<infer K, infer V> ? Map<Serialize<K>, Serialize<V>> : T extends Set<infer U> ? Set<Serialize<U>> : T extends [] ? [] : T extends readonly [infer F, ...infer R] ? [Serialize<F>, ...Serialize<R>] : T extends Array<infer U> ? Array<Serialize<U>> : T extends readonly unknown[] ? readonly Serialize<T[number]>[] : T extends Record<any, any> ? {
+     [K in keyof T]: Serialize<T[K]>;
+ } : undefined;
+ type VoidToUndefined<T> = Equal<T, void> extends true ? undefined : T;
+diff --git a/dist/production/lib/types/route-module.d.mts b/dist/production/lib/types/route-module.d.mts
+index 65548f5090c95d9a8a34f916306d3b9d6bff4250..bf88cb4f4f1fa1c9576913efc3c9d230a5315de0 100644
+--- a/dist/production/lib/types/route-module.d.mts
++++ b/dist/production/lib/types/route-module.d.mts
+@@ -1,7 +1,9 @@
+ import { ay as LinkDescriptor, av as MetaDescriptor, aM as ServerDataFrom, aN as ClientDataFrom, aO as Func, aP as Equal, aQ as Pretty } from '../../route-data-Cq_b5feC.mjs';
+ import { A as AppLoadContext } from '../../data-CQbyyGzl.mjs';
+ import 'react';
+-
++export type SerializesTo<T> = {
++    $__RR_SerializesTo?: [T];
++};
+ type IsDefined<T> = Equal<T, undefined> extends true ? false : true;
+ type RouteModule = {
+     meta?: Func;
+diff --git a/dist/production/lib/types/route-module.d.ts b/dist/production/lib/types/route-module.d.ts
+index a8b932c982cbf7935cdf5402cb844c118a2b9e79..5f9d3fbb1f79c680b3f3ba5f06caee2268ee34fd 100644
+--- a/dist/production/lib/types/route-module.d.ts
++++ b/dist/production/lib/types/route-module.d.ts
+@@ -1,7 +1,9 @@
+ import { ay as LinkDescriptor, av as MetaDescriptor, aM as ServerDataFrom, aN as ClientDataFrom, aO as Func, aP as Equal, aQ as Pretty } from '../../route-data-Cq_b5feC.js';
+ import { A as AppLoadContext } from '../../data-CQbyyGzl.js';
+ import 'react';
+-
++export type SerializesTo<T> = {
++    $__RR_SerializesTo?: [T];
++};
+ type IsDefined<T> = Equal<T, undefined> extends true ? false : true;
+ type RouteModule = {
+     meta?: Func;
+diff --git a/dist/production/route-data-Cq_b5feC.d.mts b/dist/production/route-data-Cq_b5feC.d.mts
+index a44077c379d51d720dc5539ef006d105657d673c..e5a646b097b82714a739fec8510d13bf09207699 100644
+--- a/dist/production/route-data-Cq_b5feC.d.mts
++++ b/dist/production/route-data-Cq_b5feC.d.mts
+@@ -1564,7 +1564,7 @@ type Pretty<T> = {
+     [K in keyof T]: T[K];
+ } & {};
+
+-type Serialize<T> = T extends Serializable ? T : T extends (...args: any[]) => unknown ? undefined : T extends Promise<infer U> ? Promise<Serialize<U>> : T extends Map<infer K, infer V> ? Map<Serialize<K>, Serialize<V>> : T extends Set<infer U> ? Set<Serialize<U>> : T extends [] ? [] : T extends readonly [infer F, ...infer R] ? [Serialize<F>, ...Serialize<R>] : T extends Array<infer U> ? Array<Serialize<U>> : T extends readonly unknown[] ? readonly Serialize<T[number]>[] : T extends Record<any, any> ? {
++type Serialize<T> = T extends import('./lib/types/route-module.mjs').SerializesTo<infer To> ? To : T extends Serializable ? T : T extends (...args: any[]) => unknown ? undefined : T extends Promise<infer U> ? Promise<Serialize<U>> : T extends Map<infer K, infer V> ? Map<Serialize<K>, Serialize<V>> : T extends Set<infer U> ? Set<Serialize<U>> : T extends [] ? [] : T extends readonly [infer F, ...infer R] ? [Serialize<F>, ...Serialize<R>] : T extends Array<infer U> ? Array<Serialize<U>> : T extends readonly unknown[] ? readonly Serialize<T[number]>[] : T extends Record<any, any> ? {
+     [K in keyof T]: Serialize<T[K]>;
+ } : undefined;
+ type VoidToUndefined<T> = Equal<T, void> extends true ? undefined : T;
+diff --git a/dist/production/route-data-Cq_b5feC.d.ts b/dist/production/route-data-Cq_b5feC.d.ts
+index a44077c379d51d720dc5539ef006d105657d673c..ac555685ba76cc74c6052517fa03ca632e03ba75 100644
+--- a/dist/production/route-data-Cq_b5feC.d.ts
++++ b/dist/production/route-data-Cq_b5feC.d.ts
+@@ -1564,7 +1564,7 @@ type Pretty<T> = {
+     [K in keyof T]: T[K];
+ } & {};
+
+-type Serialize<T> = T extends Serializable ? T : T extends (...args: any[]) => unknown ? undefined : T extends Promise<infer U> ? Promise<Serialize<U>> : T extends Map<infer K, infer V> ? Map<Serialize<K>, Serialize<V>> : T extends Set<infer U> ? Set<Serialize<U>> : T extends [] ? [] : T extends readonly [infer F, ...infer R] ? [Serialize<F>, ...Serialize<R>] : T extends Array<infer U> ? Array<Serialize<U>> : T extends readonly unknown[] ? readonly Serialize<T[number]>[] : T extends Record<any, any> ? {
++type Serialize<T> = T extends import('./lib/types/route-module.js').SerializesTo<infer To> ? To : T extends Serializable ? T : T extends (...args: any[]) => unknown ? undefined : T extends Promise<infer U> ? Promise<Serialize<U>> : T extends Map<infer K, infer V> ? Map<Serialize<K>, Serialize<V>> : T extends Set<infer U> ? Set<Serialize<U>> : T extends [] ? [] : T extends readonly [infer F, ...infer R] ? [Serialize<F>, ...Serialize<R>] : T extends Array<infer U> ? Array<Serialize<U>> : T extends readonly unknown[] ? readonly Serialize<T[number]>[] : T extends Record<any, any> ? {
+     [K in keyof T]: Serialize<T[K]>;
+ } : undefined;
+ type VoidToUndefined<T> = Equal<T, void> extends true ? undefined : T;

integration-test/nextjs/package.json

@@ -7,7 +7,7 @@
     "build": "next build",
     "start": "next start",
     "build-and-test": "yarn build && yarn test",
-    "test": "yarn playwright test"
+    "test": "yarn test:nextjs"
   },
   "dependencies": {
     "@apollo/client": "^3.11.10",
@@ -30,7 +30,6 @@
     "typescript": "5.1.3"
   },
   "devDependencies": {
-    "@playwright/test": "^1.49.1",
     "webpack-stats-plugin": "^1.1.3"
   }
 }