VItest + Playwright migration

.github/workflows/tests.yml

@@ -2,14 +2,15 @@ name: 🧪 Tests
 
 on:
   workflow_dispatch:
+  # Add remaining triggers
   pull_request:
-    branches: [main, 1.x]
+    branches: [main]
   push:
-    branches: [main, 1.x]
+    branches: [main]
 
 jobs:
   tests:
-    name: "🧪 Tests"
+    name: "🧪 Run All Tests"
     runs-on: ubuntu-24.04
     steps:
       - uses: actions/checkout@v3
@@ -25,37 +26,19 @@ jobs:
       - name: Install project dependencies
         run: pnpm i
 
-      - name: Install Cypress binary
-        run: pnpm exec cypress install
+      - name: Install Playwright Browsers
+        run: pnpm --filter tests exec playwright install chromium
 
       - name: Build SolidStart
         run: pnpm --filter @solidjs/start build
 
       - name: Build Test Project
         run: pnpm --filter tests build
 
-      - name: Run unit tests
-        run: pnpm --filter tests unit:ci
+      - name: Run all apps/tests (Unit, Node, Browser UI, and E2E)
+        run: pnpm --filter tests run test:all
 
-      - name: Run start unit tests
-        run: pnpm --filter @solidjs/start test:ci
-
-      - name: E2E Chromium
-        uses: cypress-io/github-action@v6
-        with:
-          project: ./apps/tests
-          install: false
-          start: pnpm --filter tests start --host 127.0.0.1 --port 3000
-          wait-on: "http://127.0.0.1:3000"
-          wait-on-timeout: 120
-          browser: chromium
-
-      - name: E2E Firefox
-        uses: cypress-io/github-action@v6
-        with:
-          project: ./apps/tests
-          install: false
-          start: pnpm --filter tests start --host 127.0.0.1 --port 3000
-          wait-on: "http://127.0.0.1:3000"
-          wait-on-timeout: 120
-          browser: firefox
+      # The @solidjs/start package currently has no tests, so we are skipping this step.
+      # Uncomment if tests are added to the @solidjs/start package.
+      # - name: Run @solidjs/start unit tests
+      #   run: pnpm --filter @solidjs/start test:ci

.gitignore

@@ -50,8 +50,7 @@ vite.config.ts.timestamp*
 .nitro
 .output
 
-# ignore cypress screenshots
-**/cypress/screenshots
-
 .data
 tsconfig.tsbuildinfo
+
+apps/tests/**/test-results

CONTRIBUTING.md

@@ -54,10 +54,23 @@ We recommend using the `create-solid` package with the **basic** setting.
 
 You can also fork this repository and go to `apps/tests`.
 There we have an app with all default configurations and many routes.
-Create a new route, a Cypress assertion to it and open a PR with the failing test-case.
+Create a new route, a Vitest or Playwright assertion (as appropriate) to it and open a PR with the failing test-case.
 
 Once the PR is there, **create an issue** and link the PR (mention the PR as you'd mention a person in the issue description and vice versa).
 
+##### On testing
+
+- If what you'd like to change needs e2e testing (i.e. you need a working build to test your feature), use playwright (see the `/app/tests/e2e` directory for examples).
+- If what you'd like to change is specific to a component, function (i.e. you need a unit test), use Vitest. You can find examples in the `/app/tests/` directory, look for the .tests.ts/.test.tsx files.
+    - Note: Vitest is also set-up to test individual components - have a look at `/app/tests/routes/(basic).browser.test.tsx` for an example.
+
+#### Testing conventions:
+
+- For e2e test, simply place them in the `apps/tests/e2e` directory. The project is configured to run anything found in that directory via playwright as an e2e test.
+- For unit tests, co-locate them in the same place as the component or function they test:
+    - E.g. If you're testing `/app/tests/MyComponent.tsx`, create a file named `/app/tests/MyComponent.test.browser.tsx` in the same directory. Note the `.browser` part - that's important to tell Vitest that this test should run in a browser environment.
+    - For server-side unit tests, use the same placement conventions as described for components, but create a file named `/app/tests/myfeature.test.server.ts` in the same directory. Using `.server` in the filename tells Vitest that this test should run in a node environment.
+
 > [!IMPORTANT]
 > Mark the **allow edit by the maintainers** so we can more easily investigate the failing test and propose a fix. Otherwise we may need to close your PR and cherry-pick your commit.
 

README.md

@@ -31,7 +31,7 @@ SolidStart is a pnpm-based monorepo with nested workspaces. Key directories incl
 
 - **`packages/start`**: The core `@solidjs/start` package.
 - **`apps/landing-page`**: The official landing page.
-- **`apps/tests`**: Unit and end-to-end (E2E) tests using Vitest and Cypress.
+- **`apps/tests`**: Unit and end-to-end (E2E) tests using Vitest and Playwright.
 - **`apps/fixtures`**: Fixture projects for testing.
 
 Use pnpm filters (e.g. `pnpm --filter @solidjs/start ...`) to target specific packages.
@@ -76,10 +76,10 @@ Then reinstall dependencies and rebuild.
 
 End-to-end tests are located in `apps/tests` projects. For manual testing and development use the `apps/fixtures` apps, and finally, integration and unit tests live inside their respective packages.
 
-1. Install the Cypress binary (required only once)
+1. Install the Chromium for Playwright binary (required only once)
 
    ```bash
-   pnpm --filter tests exec cypress install
+   pnpm --filter tests exec playwright install chromium
    ```
 
 2. For unit tests that check build artifacts, build the test app first
@@ -88,7 +88,7 @@ End-to-end tests are located in `apps/tests` projects. For manual testing and de
    pnpm --filter tests run build
    ```
 
-3. Run unit tests
+3. Run unit tests (puts vitest in watch mode)
 
    ```bash
    pnpm --filter tests run unit
@@ -100,11 +100,10 @@ End-to-end tests are located in `apps/tests` projects. For manual testing and de
 4. Run E2E tests
 
    ```bash
-   pnpm --filter tests run tests:run
+   pnpm --filter tests run e2e
    ```
 
-   - Interactive mode: `pnpm --filter tests run tests:open`
-   - With dev server: `pnpm --filter tests run tests`
+   - UI mode: `pnpm --filter tests run e2e:ui`
 
 5. Clean test artifacts
    ```bash

apps/tests/package.json

@@ -6,12 +6,12 @@
     "dev": "vite dev",
     "build": "vite build",
     "start": "vite serve",
-    "unit:ci": "vitest run",
     "unit": "vitest",
     "unit:ui": "vitest --ui",
-    "e2e:open": "cypress open",
-    "e2e:run": "cypress run",
-    "e2e": "pnpm run dev & cypress run"
+    "unit:ci": "vitest run",
+    "e2e": "playwright test",
+    "e2e:ui": "playwright test --ui",
+    "test:all": "npm run unit:ci && npm run e2e"
   },
   "dependencies": {
     "@solidjs/meta": "^0.29.4",
@@ -20,20 +20,19 @@
     "@solidjs/testing-library": "^0.8.10",
     "@testing-library/jest-dom": "^6.6.2",
     "@testing-library/user-event": "^14.5.2",
-    "@vitest/ui": "3.0.5",
+    "@vitest/ui": "^4.0.10",
     "jsdom": "^25.0.1",
     "lodash": "^4.17.21",
     "solid-js": "^1.9.9",
     "vite": "^7.1.10",
     "vite-plugin-solid": "^2.11.9",
-    "vitest": "3.0.5"
+    "vitest": "^4.0.10"
   },
   "devDependencies": {
-    "@cypress/code-coverage": "^3.14.0",
+    "@playwright/test": "^1.56.1",
     "@types/lodash": "^4.17.14",
-    "@vitest/browser": "^3.0.4",
-    "cypress": "^14.3.0",
-    "cypress-plugin-tab": "^1.0.5",
-    "cypress-vite": "^1.6.0"
+    "@vitest/browser": "^4.0.10",
+    "@vitest/browser-playwright": "^4.0.10",
+    "playwright": "^1.56.1"
   }
 }

apps/tests/playwright.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./src/e2e",
+  testMatch: "**/*.test.ts",
+
+  webServer: {
+    command: "pnpm run dev",
+    url: "http://localhost:3000",
+    reuseExistingServer: true,
+    stdout: "pipe",
+    stderr: "pipe"
+  },
+
+  use: {
+    baseURL: "http://localhost:3000",
+    trace: "on-first-retry"
+  },
+
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] }
+    }
+  ]
+});

apps/tests/src/e2e/api-call.test.ts

@@ -0,0 +1,8 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("api calls", () => {
+  test("should return plain text", async () => {
+    const response = await fetch("http://localhost:3000/api/text-plain");
+    expect(await response.text()).toBe("test");
+  });
+});