ts and better doc

README.md

@@ -823,16 +823,30 @@ $ yarn build
 $ yarn test
 ```
 
+To update a snapshot:
+
+```sh
+$ PLAYWRIGHT_UPDATE_SNAPSHOTS=1 yarn test
+```
+
 #### Docker
 
-Or in the same environment as the CI:
+> [!IMPORTANT]
+> Snapshots are system-dependent, so to run playwright in the same environment as the CI:
 
 ```sh
-$ yarn build
-$ docker run --init --rm -v $(pwd):/app -w /app ghcr.io/pmndrs/playwright:drei sh -c "corepack enable && yarn install && yarn test"
+$ docker run --init --rm \
+    -v $(pwd):/app -w /app \
+    ghcr.io/pmndrs/playwright:drei \
+      sh -c "corepack enable && yarn install && yarn build && yarn test"
 ```
 
-> [!TIP]
-> If running on mac m-series, you may need to add `--platform linux/arm64` to the docker command.
+To update a snapshot:
 
-To update a snapshot, simply remove it and relaunch the test command.
+```sh
+$ docker run --init --rm \
+    -v $(pwd):/app -w /app \
+    -e PLAYWRIGHT_UPDATE_SNAPSHOTS=1 \
+    ghcr.io/pmndrs/playwright:drei \
+      sh -c "corepack enable && yarn install && yarn build && yarn test"
+```

test/e2e/e2e.sh

@@ -4,18 +4,22 @@ set -ex
 PORT=5188
 DIST=../../dist
 
+snapshot() {
+  local UPDATE_SNAPSHOTS=""
+  if [ "$PLAYWRIGHT_UPDATE_SNAPSHOTS" = "1" ]; then
+    UPDATE_SNAPSHOTS="--update-snapshots"
+  fi
+  npx playwright test $UPDATE_SNAPSHOTS snapshot.test.ts
+}
+
 (cd $DIST; npm pack)
 TGZ=$(realpath "$DIST/react-three-drei-0.0.0-semantic-release.tgz")
 
 kill_app() {
   kill -9 $(lsof -ti:$PORT) || echo "ok, no previous running process on port $PORT"
 }
-
-cleanup() {
-  kill_app
-}
-cleanup || true
-trap cleanup EXIT INT TERM HUP
+kill_app || true
+trap kill_app EXIT INT TERM HUP
 
 tmp=$(mktemp -d)
 
@@ -42,7 +46,7 @@ cp App.tsx $appdir/src/App.tsx
 
 # build+start+playwright
 (cd $appdir; npm run build; npm run preview -- --host --port $PORT &)
-npx playwright test snapshot.test.js
+snapshot
 kill_app
 
 #
@@ -68,7 +72,7 @@ cp App.tsx $appdir/app/page.tsx
 
 # build+start+playwright
 (cd $appdir; npm run build; npm start -- -p $PORT &)
-npx playwright test snapshot.test.js
+snapshot
 kill_app
 
 #  ██████╗     ██╗███████╗
@@ -112,7 +116,7 @@ EOF
 
 # build+start+playwright
 (cd $appdir; npm run build; npm start -- -p $PORT &)
-npx playwright test snapshot.test.js
+snapshot
 kill_app
 
 #
@@ -138,7 +142,7 @@ cp App.tsx $appdir/src/App.tsx
 
 # build+start+playwright
 (cd $appdir; npm run build; npx serve -s -p $PORT build &)
-npx playwright test snapshot.test.js
+snapshot
 kill_app
 
 #

test/e2e/snapshot.test.js → test/e2e/snapshot.test.ts

@@ -1,9 +1,9 @@
-const http = require('http')
-const { test, expect } = require('@playwright/test')
+import { request } from 'node:http'
+import { test, expect, Page } from '@playwright/test'
 
 const host = 'http://localhost:5188/'
 
-async function waitForEvent(page, eventName) {
+async function waitForEvent(page: Page, eventName: string) {
   await page.evaluate(
     (eventName) => new Promise((resolve) => document.addEventListener(eventName, resolve, { once: true })),
     eventName
@@ -13,11 +13,11 @@ async function waitForEvent(page, eventName) {
 function waitForServer() {
   return new Promise((resolve) => {
     function ping() {
-      const request = http.request(host, { method: 'HEAD' }, resolve)
-      request.on('error', () => {
+      const req = request(host, { method: 'HEAD' }, resolve)
+      req.on('error', () => {
         setTimeout(ping, 500) // not yet up? => re-ping in 500ms
       })
-      request.end()
+      req.end()
     }
 
     ping()