chore: e2e cjs test (#2202)

* e2e cjs test

* doc

* ts and better doc

README.md

@@ -796,3 +796,57 @@ https://pmndrs.github.io/drei
 [Documentation has moved here](https://pmndrs.github.io/drei/staging/shadow-alpha)
 
 </details>
+
+## Dev
+
+### INSTALL
+
+```sh
+$ corepack enable
+$ yarn install
+```
+
+### Test
+
+#### Local
+
+Pre-requisites:
+
+- ```sh
+  $ npx playwright install
+  ```
+
+To run visual tests locally:
+
+```sh
+$ yarn build
+$ yarn test
+```
+
+To update a snapshot:
+
+```sh
+$ PLAYWRIGHT_UPDATE_SNAPSHOTS=1 yarn test
+```
+
+#### Docker
+
+> [!IMPORTANT]
+> Snapshots are system-dependent, so to run playwright in the same environment as the CI:
+
+```sh
+$ docker run --init --rm \
+    -v $(pwd):/app -w /app \
+    ghcr.io/pmndrs/playwright:drei \
+      sh -c "corepack enable && yarn install && yarn build && yarn test"
+```
+
+To update a snapshot:
+
+```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"
+```

docs/getting-started/introduction.mdx

@@ -5,7 +5,8 @@ nav: -1
 ---
 
 <Intro>
-  A growing collection of useful helpers and fully functional, ready-made abstractions for [@react-three/fiber](https://github.com/pmndrs/react-three-fiber).
+  A growing collection of useful helpers and fully functional, ready-made abstractions for
+  [@react-three/fiber](https://github.com/pmndrs/react-three-fiber).
 </Intro>
 
 [![logo](../logo.jpg)](https://codesandbox.io/s/bfplr)
@@ -37,24 +38,3 @@ import { PerspectiveCamera, PositionalAudio, ... } from '@react-three/drei/nativ
 ```
 
 The `native` route of the library **does not** export `Html` or `Loader`. The default export of the library is `web` which **does** export `Html` and `Loader`.
-
-## INSTALL
-
-```sh
-& corepack enable
-$ yarn install
-```
-
-## Tests
-
-To run visual tests in the same environment as the CI:
-
-```sh
-$ yarn build
-$ docker run --init --rm -v $(pwd):/app -w /app ghcr.io/pmndrs/playwright:main 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, simply remove it and relaunch the test command.

test/e2e/e2e.sh

@@ -3,21 +3,25 @@ set -ex
 
 PORT=5188
 DIST=../../dist
+tmp=$(mktemp -d)
 
+# Build the package
 (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"
+snapshot() {
+  local UPDATE_SNAPSHOTS=""
+  if [ "$PLAYWRIGHT_UPDATE_SNAPSHOTS" = "1" ]; then
+    UPDATE_SNAPSHOTS="--update-snapshots"
+  fi
+  npx playwright test $UPDATE_SNAPSHOTS snapshot.test.ts
 }
 
-cleanup() {
-  kill_app
+kill_app() {
+  kill -9 $(lsof -ti:$PORT) || echo "ok, no previous running process on port $PORT"
 }
-cleanup || true
-trap cleanup EXIT INT TERM HUP
-
-tmp=$(mktemp -d)
+kill_app || true
+trap kill_app EXIT INT TERM HUP
 
 #
 # ██╗   ██╗██╗████████╗███████╗
@@ -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,51 @@ 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
+
+#  ██████╗     ██╗███████╗
+# ██╔════╝     ██║██╔════╝
+# ██║          ██║███████╗
+# ██║     ██   ██║╚════██║
+# ╚██████╗╚█████╔╝███████║
+#  ╚═════╝ ╚════╝ ╚══════╝
+# 
+# (using Next.js)
+#
+
+appname=cjsapp
+appdir="$tmp/$appname"
+
+# create app
+(cd $tmp; npx -y create-next-app@14 $appname --ts --no-eslint --no-tailwind --no-src-dir --app --import-alias "@/*")
+
+# drei
+(cd $appdir; npm i $TGZ)
+
+# App.tsx
+cp App.tsx $appdir/app/page.tsx
+
+# next.config.mjs
+cat <<EOF >$appdir/next.config.mjs
+console.log('🦆 CJS override (next.config.mjs)')
+import path from 'path'
+
+/** @type {import('next').NextConfig} */
+export default {
+  //
+  // We force Next to use drei's CJS version here
+  //
+  webpack: (config) => {
+    config.resolve.alias['@react-three/drei'] = path.resolve('node_modules/@react-three/drei/index.cjs.js')
+    return config
+  },
+}
+EOF
+
+# build+start+playwright
+(cd $appdir; npm run build; npm start -- -p $PORT &)
+snapshot
 kill_app
 
 #
@@ -94,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()