e2e

.eslintignore

@@ -2,3 +2,4 @@
 dist/
 node_modules/
 storybook-static/
+test/e2e/*app

.github/workflows/release.yml

@@ -23,6 +23,7 @@ jobs:
           cache: 'yarn'
       - run: yarn install
       - run: yarn build-storybook
+      - run: yarn test
       # semantic-release skips not configured branches(see: release.config.js) or pull-requests
       - run: yarn release
         env:

.gitignore

@@ -16,3 +16,5 @@ coverage/
 .idea
 yarn-error.log
 .size-snapshot.json
+test/e2e/*app
+__diff_output__

package.json

@@ -46,7 +46,7 @@
     "eslint:ci": "eslint .",
     "prettier": "prettier --check .",
     "prettier-fix": "prettier --write .",
-    "test": "npm run eslint:ci && npm run prettier",
+    "test": "npm run eslint:ci && (cd test/e2e; ./e2e.sh)",
     "typecheck": "tsc --noEmit --emitDeclarationOnly false --strict --jsx react",
     "typegen": "tsc --emitDeclarationOnly",
     "storybook": "NODE_OPTIONS=\"--openssl-legacy-provider\" storybook dev -p 6006",
@@ -111,7 +111,7 @@
     "@typescript-eslint/parser": "^5.4.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
-    "copyfiles": "^2.3.0",
+    "copyfiles": "^2.4.1",
     "eslint": "^7.7.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.22.0",
@@ -120,17 +120,20 @@
     "eslint-plugin-react-hooks": "^4.1.0",
     "eslint-plugin-storybook": "^0.6.12",
     "husky": "^6.0.0",
-    "jest": "^26.4.1",
+    "jest": "^29.5.0",
+    "jest-image-snapshot": "^6.1.0",
     "json": "^11.0.0",
     "prettier": "^2.4.1",
     "pretty-quick": "^3.1.0",
+    "puppeteer": "^20.7.4",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "rimraf": "^3.0.2",
     "rollup": "^3.25.1",
     "rollup-plugin-glslify": "^1.3.0",
     "rollup-plugin-multi-input": "^1.4.1",
     "semantic-release": "^21.0.6",
+    "serve": "^14.2.0",
     "storybook": "^7.0.12",
     "three": "^0.149.0",
     "ts-node": "^10.9.1",

test/e2e/App.jsx

@@ -0,0 +1,33 @@
+import { Suspense, useEffect } from 'react'
+import { Canvas } from '@react-three/fiber'
+import { Box, Environment, CameraControls } from '@react-three/drei' // eslint-disable-line import/no-unresolved
+
+function App() {
+  return (
+    <Canvas camera={{ position: [1, 1, 1] }} style={{ width: 300, height: 150, background: 'white' }}>
+      <Suspense fallback={null}>
+        <Scene />
+      </Suspense>
+    </Canvas>
+  )
+}
+
+function Scene() {
+  useEffect(() => {
+    document.dispatchEvent(new Event('puppeteer:r3f'))
+  }, [])
+
+  return (
+    <>
+      <Box>
+        <meshStandardMaterial />
+      </Box>
+
+      <Environment preset="city" />
+
+      <CameraControls />
+    </>
+  )
+}
+
+export default App

test/e2e/e2e.sh

@@ -0,0 +1,72 @@
+#!/bin/sh
+set -ex
+
+PORT=5188
+
+(cd ../../dist; npm pack)
+
+kill_app() {
+  kill $(lsof -ti:$PORT)
+}
+
+kill_app || echo "ok, no previous running process on port $PORT"
+
+#
+# ██╗   ██╗██╗████████╗███████╗
+# ██║   ██║██║╚══██╔══╝██╔════╝
+# ██║   ██║██║   ██║   █████╗  
+# ╚██╗ ██╔╝██║   ██║   ██╔══╝  
+#  ╚████╔╝ ██║   ██║   ███████╗
+#   ╚═══╝  ╚═╝   ╚═╝   ╚══════╝
+#
+
+rm -rf viteapp
+
+# create app
+npm create vite@latest viteapp -- --template react
+
+# drei
+(cd viteapp; npm i; npm i ../../../dist/react-three-drei-0.0.0-semantic-release.tgz)
+
+# App.jsx
+cp App.jsx viteapp/src/App.jsx
+
+# build+start+jest
+(cd viteapp; npm run build; npm run preview -- --port $PORT &)
+npx jest snapshot.test.js || kill_app
+kill_app
+
+rm -rf viteapp
+
+#
+#  ██████╗██████╗  █████╗ 
+# ██╔════╝██╔══██╗██╔══██╗
+# ██║     ██████╔╝███████║
+# ██║     ██╔══██╗██╔══██║
+# ╚██████╗██║  ██║██║  ██║
+#  ╚═════╝╚═╝  ╚═╝╚═╝  ╚═╝
+#
+
+rm -rf craapp
+
+# create app
+npx create-react-app craapp
+
+# drei
+(cd craapp; npm i ../../../dist/react-three-drei-0.0.0-semantic-release.tgz)
+
+# App.jsx
+cp App.jsx craapp/src/App.js
+
+# build+start+jest
+(cd craapp; npm run build; npx serve -s -p $PORT build &)
+npx jest snapshot.test.js || kill_app
+kill_app
+
+rm -rf craapp
+
+#
+# Teardown
+#
+
+echo "✅ e2e ok"

test/e2e/snapshot.test.js

@@ -0,0 +1,37 @@
+const puppeteer = require('puppeteer')
+
+const { toMatchImageSnapshot } = require('jest-image-snapshot')
+expect.extend({ toMatchImageSnapshot })
+
+async function waitForEvent(page, eventName) {
+  await page.evaluate(
+    (eventName) => new Promise((resolve) => document.addEventListener(eventName, resolve, { once: true })),
+    eventName
+  )
+}
+
+describe('snapshot', () => {
+  let browser
+  let page
+  beforeAll(async () => {
+    browser = await puppeteer.launch({ headless: 'new' })
+    page = await browser.newPage()
+  })
+
+  it('should match previous one', async () => {
+    // ⏳ "r3f" event
+    await page.goto('http://localhost:5188')
+    await waitForEvent(page, 'puppeteer:r3f')
+
+    // 📸 <canvas>
+    const $canvas = await page.$('canvas[data-engine]')
+    const image = await $canvas.screenshot()
+
+    // compare
+    expect(image).toMatchImageSnapshot({})
+  }, 30000)
+
+  afterAll(async () => {
+    await browser.close()
+  })
+})