chore: Include Nextjs versions 15/16 in loader tests (#2310)

* chore: Include Nextjs versions 15/16 in loader tests

* fix: add missing pnpm-lock.yaml files

* docs: document pnpm usage

* fix: update package.json to use react-18

* feedback

* test: at least one test using react 17

* test: also test with React 19 + refactor

* fix: React 17 should only be tested with loader v1

* chore: use latest react version for app router template

Also remove testing of react-quill package for latest react version

* fix: an accidental change

* docs: update loader-tests/README.md to include e2e tests

GitOrigin-RevId: 6a5f30608b1c6d079b9919a96ead9409d1650e1b

Author: sarahsga

platform/loader-tests/.gitignore

@@ -1,3 +1,4 @@
 __diff_output__/
 screenshots/
 videos/
+pnpm-workspace.yaml

platform/loader-tests/README

@@ -0,0 +1,65 @@
+# loader-tests
+
+End-to-end Playwright tests for Plasmic SDK packages. Tests verify that Plasmic projects render correctly when integrated into real framework apps (Next.js, Gatsby, CRA).
+
+> **Note:** The `cypress/` directory and Jest-based specs in `src/nextjs/*.spec.ts` are **obsolete** and no longer maintained or run by CI. All active tests use Playwright.
+
+## How it works
+
+There are two kinds of Playwright tests:
+
+### Loader tests (`src/playwright-tests/nextjs/`, `src/playwright-tests/gatsby/`, etc.)
+
+Each test uploads a JSON bundle from `data/` to the local Plasmic server, copies a framework template (e.g. `src/nextjs/template-pages/`) into a temp directory, installs deps with `pnpm install --frozen-lockfile`, builds the app, starts it on a random port, then runs Playwright assertions against it. Tests run against multiple loader/framework version combinations defined in `src/env.ts`.
+
+### E2E codegen/loader tests (`src/playwright-tests/e2e/`)
+
+These tests exercise `create-plasmic-app` end-to-end. Instead of copying a template, each test runs `npx create-plasmic-app` to scaffold a real project (Next.js, React, or TanStack Start), builds it, starts a server, and runs Playwright assertions. Tests cover both codegen and loader schemes. On CI, all changed packages are published to verdaccio first so the scaffolded projects pick up the latest local builds.
+
+### Adding a new loader test
+
+Export a Plasmic project bundle as JSON into `data/`. Then write a Playwright spec in `src/playwright-tests/` by copying boilerplate from a similar test.
+
+### Adding a new e2e test
+
+This should rarely be needed.
+Add a new spec file in `src/playwright-tests/e2e/` using `defineE2eTests()` from `e2e-test-utils.ts`. Specify the platform, test cases (scheme, typescript, appDir), and assertion callback. See `e2e-nextjs-codegen.spec.ts` for an example.
+
+Note: These tests were split by platform into multiple files to enable parallel execution.
+
+## pnpm in templates
+
+The framework templates use pnpm with `--frozen-lockfile`. If you update a template's `package.json`, you need to regenerate the lockfile:
+
+1. Create a `pnpm-workspace.yaml` in the template directory if it doesn't already exist:
+   ```bash
+   echo 'packages:\n  - "."' > src/nextjs/template-pages/pnpm-workspace.yaml
+   ```
+   This ensures that the `pnpm install` in the next step alters the template's own lock file.
+   The `pnpm-workspace.yaml` file is gitignored and won't be committed.
+2. Run `pnpm install` in the template directory to regenerate `pnpm-lock.yaml`.
+
+## Running tests
+
+```bash
+# All tests
+yarn test
+
+# Playwright only
+yarn test-playwright
+
+# Specific test file
+yarn test-playwright src/playwright-tests/nextjs/antd5/tabs.spec.ts
+
+# Specific folder
+yarn test-playwright src/playwright-tests/nextjs/antd5/
+
+# Interactive UI mode
+yarn playwright-ui
+
+# To run E2e tests (requires verdaccio with local packages published)
+yarn local-publish
+yarn run local:playwright-ui
+```
+
+On failure, traces and videos are saved to `test-results/`. The HTML report opens automatically, or run `npx playwright show-report`. Each test logs its temp directory path (`tmpdir /tmp/...`) which you can inspect to debug build issues (comment out teardown to keep it around).

platform/loader-tests/README.md

@@ -26,6 +26,8 @@ export async function setupCra(opts: {
   bundleFile: string;
   projectName: string;
   template?: string;
+  reactVersion?: string;
+  loaderReactVersion?: string;
 }): Promise<CraContext> {
   const { bundleFile, projectName } = opts;
   const { projectId, projectToken } = await uploadProject(
@@ -39,7 +41,12 @@ export async function setupCra(opts: {
   console.log("tmpdir", tmpdir);
   const { server, host } = await setupCraServer(
     { projectId, projectToken },
-    { type: "cra", template: opts.template },
+    {
+      type: "cra",
+      template: opts.template,
+      reactVersion: opts.reactVersion,
+      loaderReactVersion: opts.loaderReactVersion,
+    },
     tmpdir
   );
 
@@ -80,8 +87,21 @@ export async function setupCraServer(
     `pnpm install --frozen-lockfile ${pnpmCiFlags}`,
     pnpmOptions
   );
+
+  const updatePackages = [
+    `@plasmicapp/loader-react@${env.loaderReactVersion ?? "latest"}`,
+  ];
+  if (env.reactVersion) {
+    updatePackages.push(
+      `react@${env.reactVersion}`,
+      `react-dom@${env.reactVersion}`,
+      `@types/react@${env.reactVersion}`,
+      `@types/react-dom@${env.reactVersion}`
+    );
+  }
+
   await runCommand(
-    `pnpm update @plasmicapp/loader-react --latest ${pnpmCiFlags}`,
+    `pnpm update ${updatePackages.join(" ")} ${pnpmCiFlags}`,
     pnpmOptions
   );
 

platform/loader-tests/src/cra/cra-setup.ts

@@ -19,20 +19,31 @@ export function getEnvVar(variable: keyof typeof DEFAULT_ENV): string {
 }
 
 export const LOADER_NEXTJS_TEMPLATES = [
-  { template: "template-pages", nextVersion: "^12" },
-  { template: "template-app", nextVersion: "15.5.3" },
+  { loaderVersion: "1", template: "template-pages", nextVersion: "12" },
+  {
+    loaderVersion: "1",
+    template: "template-app",
+    reactVersion: "latest",
+    nextVersion: "15.5.3",
+  },
 ];
 
 export const LOADER_NEXTJS_VERSIONS = [
-  { loaderVersion: "latest", nextVersion: "latest" },
+  { loaderVersion: "latest", reactVersion: "latest", nextVersion: "latest" },
   // Before PlasmicLinkProvider / usePlasmicLink is added
-  { loaderVersion: "1.0.287", nextVersion: "^12" },
+  { loaderVersion: "1.0.287", reactVersion: "18", nextVersion: "12" },
+];
+
+export const LOADER_REACT_VERSIONS = [
+  { reactVersion: "17", loaderReactVersion: "latest" },
+  { reactVersion: "18", loaderReactVersion: "latest" },
 ];
 
 export const LOADER_NEXTJS_VERSIONS_EXHAUSTIVE = [
   ...LOADER_NEXTJS_VERSIONS,
-  { loaderVersion: "^1", nextVersion: "^13" },
-  { loaderVersion: "^1", nextVersion: "^14" },
+  { loaderVersion: "latest", reactVersion: "18", nextVersion: "13" },
+  { loaderVersion: "latest", reactVersion: "18", nextVersion: "14" },
+  { loaderVersion: "latest", reactVersion: "18", nextVersion: "15" },
 ];
 
 function maybeSwapWithDockerLocalhost(value: string | undefined) {

platform/loader-tests/src/env.ts

@@ -2,6 +2,7 @@
   "name": "template",
   "version": "0.1.0",
   "private": true,
+  "packageManager": "pnpm@10.28.2",
   "scripts": {
     "dev": "next dev",
     "build": "next build",