chore: logs

.github/workflows/release.yml

@@ -17,13 +17,13 @@ jobs:
   main:
     runs-on: macos-14
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           cache: 'yarn'
-      - run: yarn install
-      - run: yarn build-storybook
+      - run: yarn install --frozen-lockfile
       - run: yarn test
+      - run: yarn build-storybook
       # semantic-release skips not configured branches(see: release.config.js) or pull-requests
       - run: yarn release
         env:

package.json

@@ -47,6 +47,7 @@
     "eslint:ci": "eslint .",
     "prettier": "prettier --check .",
     "prettier-fix": "prettier --write .",
+    "pretest": "npm run build",
     "test": "npm run eslint:ci && (cd test/e2e; ./e2e.sh)",
     "typecheck": "tsc --noEmit --emitDeclarationOnly false --strict --jsx react",
     "typegen": "tsc --emitDeclarationOnly",
@@ -65,6 +66,7 @@
     "cross-env": "^7.0.3",
     "detect-gpu": "^5.0.28",
     "glsl-noise": "^0.0.0",
+    "hls.js": "1.3.5",
     "maath": "^0.10.7",
     "meshline": "^3.1.6",
     "react-composer": "^5.0.3",
@@ -77,8 +79,7 @@
     "tunnel-rat": "^0.1.2",
     "utility-types": "^3.10.0",
     "uuid": "^9.0.1",
-    "zustand": "^3.7.1",
-    "hls.js": "1.3.5"
+    "zustand": "^3.7.1"
   },
   "devDependencies": {
     "@babel/core": "^7.14.3",
@@ -121,12 +122,12 @@
     "eslint-plugin-react-hooks": "^4.1.0",
     "eslint-plugin-storybook": "^0.6.12",
     "husky": "^6.0.0",
-    "jest": "^29.5.0",
-    "jest-image-snapshot": "^6.1.0",
+    "jest": "^29.7.0",
+    "jest-image-snapshot": "^6.4.0",
     "json": "^11.0.0",
     "prettier": "^2.4.1",
     "pretty-quick": "^3.1.0",
-    "puppeteer": "^20.7.4",
+    "puppeteer": "^22.6.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "rimraf": "^3.0.2",

test/e2e/App.jsx

@@ -5,6 +5,8 @@ import { Canvas } from '@react-three/fiber'
 import { Sphere, Environment, CameraControls } from '@react-three/drei' // eslint-disable-line import/no-unresolved
 
 function App() {
+  console.log('App')
+
   return (
     <Canvas camera={{ position: [1, 1, 1] }} style={{ width: 300, height: 150, background: 'white' }}>
       <Suspense fallback={null}>
@@ -16,6 +18,8 @@ function App() {
 
 function Scene() {
   useEffect(() => {
+    console.log('useEffect')
+
     document.dispatchEvent(new Event('puppeteer:r3f'))
   }, [])
 

test/e2e/e2e.sh

@@ -27,7 +27,7 @@ appname=viteapp
 appdir="$tmp/$appname"
 
 # create app
-(cd $tmp; npm create vite@latest $appname -- --template react)
+(cd $tmp; npm create -y vite@latest $appname -- --template react)
 
 # drei
 (cd $appdir; npm i; npm i $TGZ)

test/e2e/snapshot.test.js

@@ -6,6 +6,8 @@ expect.extend({ toMatchImageSnapshot })
 
 const host = 'http://localhost:5188/'
 
+const TIMEOUT = 10000
+
 async function waitForEvent(page, eventName) {
   await page.evaluate(
     (eventName) => new Promise((resolve) => document.addEventListener(eventName, resolve, { once: true })),
@@ -31,26 +33,47 @@ describe('snapshot', () => {
   let page
   beforeAll(async () => {
     await waitForServer()
+    console.log('server ok')
+
+    const executablePath = process.env.PUPPETEER_EXECUTABLE_PATH
+    console.log('executablePath', executablePath)
+
+    const args = ['--enable-gpu']
+
     browser = await puppeteer.launch({
-      headless: 'new',
-      executablePath: process.env.CHROMEWEBDRIVER,
-      args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-dev-shm-usage'],
+      executablePath,
+      args,
     })
+    console.log('browser ok')
+
     page = await browser.newPage()
-  }, 30000)
+    console.log('page ok')
 
-  it('should match previous one', async () => {
-    // ⏳ "r3f" event
-    await page.goto(host)
-    await waitForEvent(page, 'puppeteer:r3f')
+    page.on('console', (message) => console.log(`Page log: ${message.text()}`))
+  }, TIMEOUT)
 
-    // 📸 <canvas>
-    const $canvas = await page.$('canvas[data-engine]')
-    const image = await $canvas.screenshot()
+  it(
+    'should match previous one',
+    async () => {
+      // ⏳ "r3f" event
+      await page.goto(host)
+      console.log('goto ok')
 
-    // compare
-    expect(image).toMatchImageSnapshot({})
-  }, 30000)
+      await waitForEvent(page, 'puppeteer:r3f')
+      console.log('event ok')
+
+      // 📸 <canvas>
+      const $canvas = await page.$('canvas[data-engine]')
+      const image = await $canvas.screenshot()
+
+      // compare
+      expect(image).toMatchImageSnapshot({
+        // failureThreshold: 1,
+        // failureThresholdType: 'percent',
+      })
+    },
+    TIMEOUT
+  )
 
   afterAll(async () => {
     await browser?.close()