test: configure Vitest browser mode and add basic bindings (#1192)

* test: configure Vitest browser mode and add basic bindings

* add to CI

* add interaction to test

* fix test command

* clean up CI names

* split up CI jobs

* install deps

Author: jderochervlk

.github/workflows/pull-request.yml

@@ -1,15 +1,49 @@
-name: Test
+name: Pull Request
 on: [pull_request]
 jobs:
-  build:
+  Format:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup node
+        uses: actions/setup-node@v4
         with:
           node-version-file: ".node-version"
           cache: yarn
-      - run: yarn
-      - run: yarn build:res --warn-error +3+8+11+12+26+27+31+32+33+34+35+39+44+45+110
-      - run: yarn test
-      - run: yarn ci:format
+      - name: Install dependencies
+        run: yarn
+      - name: Format check
+        run: yarn ci:format
+  Site_Checks:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ".node-version"
+          cache: yarn
+      - name: Install dependencies
+        run: yarn
+      - name: Test examples and hrefs
+        run: yarn test
+  Vitest:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ".node-version"
+          cache: yarn
+      - name: Install dependencies
+        run: yarn
+      - name: Build ReScript
+        run: yarn build:res
+      - name: Install Playwright
+        run: yarn playwright install --with-deps
+      - name: Vitest
+        run: yarn ci:test

.gitignore

@@ -48,6 +48,8 @@ app/**/*.mjs
 app/**/*.jsx
 functions/**/*.mjs
 functions/**/*.jsx
+__tests__/**/*.mjs
+__tests__/**/*.jsx
 !_shims.mjs
 !_shims.jsx
 

__tests__/Example.test.res

@@ -0,0 +1,28 @@
+open Vitest
+
+module Example = {
+  @react.component
+  let make = (~handleClick) =>
+    <div>
+      <button onClick=handleClick> {React.string("testing")} </button>
+    </div>
+}
+
+test("basic assertions", async () => {
+  expect("foo")->toBe("foo")
+
+  expect(true)->toBe(true)
+})
+
+test("component rendering", async () => {
+  let callback = fn()
+  let screen = await render(<Example handleClick=callback />)
+
+  await element(screen->getByText("testing"))->toBeVisible
+
+  let button = await screen->getByRole(#button)
+
+  await button->click
+
+  expect(callback)->toHaveBeenCalled
+})

package.json

@@ -12,12 +12,13 @@
   "scripts": {
     "build:scripts": "yarn dlx tsdown@0.20.0 scripts/*.jsx -d _scripts --no-clean --ext .mjs",
     "build:generate-llms": "node _scripts/generate_llms.mjs",
-    "build:res": "rescript build",
+    "build:res": "rescript build --warn-error +3+8+11+12+26+27+31+32+33+34+35+39+44+45+110",
     "build:sync-bundles": "node scripts/sync-playground-bundles.mjs",
     "build:update-index": "yarn build:generate-llms && node _scripts/generate_feed.mjs > public/blog/feed.xml",
     "build:vite": "react-router build",
     "build": "yarn build:res && yarn build:scripts && yarn build:update-index && yarn build:vite",
     "ci:format": "prettier . --check --experimental-cli",
+    "ci:test": "yarn vitest --run --browser.headless",
     "clean:res": "rescript clean",
     "convert-images": "auto-convert-images",
     "dev:res": "rescript watch",
@@ -28,7 +29,8 @@
     "prepare": "yarn build:res && yarn build:scripts && yarn build:update-index",
     "preview": "yarn build && static-server build/client",
     "reanalyze": "rescript-tools reanalyze -all-cmt .",
-    "test": "node scripts/test-examples.mjs && node scripts/test-hrefs.mjs"
+    "test": "node scripts/test-examples.mjs && node scripts/test-hrefs.mjs",
+    "vitest": "vitest"
   },
   "dependencies": {
     "@babel/generator": "^7.24.7",
@@ -84,12 +86,14 @@
     "@tailwindcss/vite": "^4.1.13",
     "@types/react": "^19.2.2",
     "@vitejs/plugin-react": "^4.7.0",
+    "@vitest/browser-playwright": "^4.0.18",
     "auto-image-converter": "^2.1.2",
     "chokidar": "^4.0.3",
     "dotenv": "^16.4.7",
     "jsdom": "^26.1.0",
     "lefthook": "^2.0.4",
     "lightningcss": "^1.30.1",
+    "playwright": "^1.58.2",
     "prettier": "^3.6.2",
     "remark-cli": "^12.0.1",
     "search-insights": "^2.17.3",
@@ -100,6 +104,8 @@
     "vite-plugin-devtools-json": "^1.0.0",
     "vite-plugin-env-compatible": "^2.0.1",
     "vite-plugin-page-reload": "^0.2.2",
+    "vitest": "^4.0.18",
+    "vitest-browser-react": "^2.0.5",
     "wrangler": "^4.63.0"
   }
 }

rescript.json

@@ -8,6 +8,11 @@
   "dependencies": ["@rescript/react", "@rescript/webapi"],
   "compiler-flags": ["-open WebAPI.Global"],
   "sources": [
+    {
+      "dir": "__tests__",
+      "subdirs": true,
+      "type": "dev"
+    },
     {
       "dir": "app",
       "subdirs": true

src/bindings/Vitest.res

@@ -0,0 +1,56 @@
+type page
+type expect
+type screen
+type element
+type mock
+
+/**
+ * Vitest
+ */
+@module("vitest")
+external test: (string, unit => promise<unit>) => unit = "test"
+
+@module("vitest") @scope("vi")
+external fn: unit => 'a => 'b = "fn"
+
+@module("vitest")
+external expect: 'a => expect = "expect"
+
+/**
+ * vitest-browser-react
+ */
+@module("vitest-browser-react")
+external render: Jsx.element => promise<screen> = "render"
+
+@module("vitest") @scope("expect")
+external element: 'a => element = "element"
+
+/*
+ * Locators
+ */
+@send
+external getByText: (screen, string) => element = "getByText"
+
+@send
+external getByRole: (screen, [#button]) => promise<element> = "getByRole"
+
+/**
+ * Actions
+ */
+@send
+external click: element => promise<unit> = "click"
+
+/**
+ * Vitest assertions
+ */
+@send
+external toBe: (expect, 'a) => unit = "toBe"
+
+@send
+external toHaveBeenCalled: expect => unit = "toHaveBeenCalled"
+
+/**
+ * Browser assertions
+ */
+@send
+external toBeVisible: element => promise<unit> = "toBeVisible"

vitest.config.js

@@ -0,0 +1,16 @@
+import { defineConfig } from "vitest/config";
+import { playwright } from "@vitest/browser-playwright";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    include: ["__tests__/*.jsx"],
+    browser: {
+      enabled: true,
+      provider: playwright(),
+      // https://vitest.dev/config/browser/playwright
+      instances: [{ browser: "chromium" }],
+    },
+  },
+});