Pin to three 0.133 and add a visual regression test for it

packages/playground/devEnv/playwright.config.ts

@@ -51,6 +51,10 @@ const config: PlaywrightTestConfig = {
       name: 'chromium',
       use: {
         ...devices['Desktop Chrome'],
+        launchOptions: {
+          // args: ["--headless","--no-sandbox","--use-angle=gl"]
+          args: ['--no-sandbox'],
+        },
       },
     },
 

packages/playground/src/tests/hot-reload-extension-pane/test.e2e.ts

@@ -5,15 +5,13 @@ test.describe('hot-reload-extension-pane', () => {
     await page.goto('./tests/hot-reload-extension-pane/')
 
     const toolbar = page.locator(
-      '[data-test-id="theatre-extensionToolbar-global"]',
+      '[data-testid="theatre-extensionToolbar-global"]',
     )
 
     const forwardButton = toolbar.getByRole('button', {name: '>'})
     await forwardButton.click()
 
-    const pane = page.locator(
-      '[data-test-id="theatre-pane-content-pane1 \\#1"]',
-    )
+    const pane = page.locator('[data-testid="theatre-pane-content-pane1 \\#1"]')
 
     expect(await pane.textContent()).toEqual('pane1-config1')
     await forwardButton.click()

packages/playground/src/tests/hot-reload-extension-toolbar/test.e2e.ts

@@ -5,7 +5,7 @@ test.describe('hot-reload-extension-toolbar', () => {
     await page.goto('./tests/hot-reload-extension-toolbar/')
 
     const toolbar = page.locator(
-      '[data-test-id="theatre-extensionToolbar-global"]',
+      '[data-testid="theatre-extensionToolbar-global"]',
     )
 
     const forwardButton = toolbar.getByRole('button', {name: '>'})

packages/playground/src/tests/r3f-dynamic-tree/App.tsx

@@ -51,9 +51,13 @@ const cube1Config3 = cube1Config2
 function Scene() {
   const [state, setState] = useState(1)
 
-  useExtensionButton('Step forward', () => {
-    setState((s) => s + 1)
-  })
+  useExtensionButton(
+    'Step forward',
+    () => {
+      setState((s) => s + 1)
+    },
+    '>',
+  )
 
   useEffect(() => {}, [])
 

packages/playground/src/tests/r3f-dynamic-tree/index.tsx

@@ -5,6 +5,6 @@ import studio from '@theatre/studio'
 import extension from '@theatre/r3f/dist/extension'
 
 studio.extend(extension)
-studio.initialize()
+studio.initialize({usePersistentStorage: false})
 
 ReactDOM.render(<App />, document.getElementById('root'))

packages/playground/src/tests/r3f-dynamic-tree/test.e2e.ts

@@ -0,0 +1,24 @@
+import {test, expect} from '@playwright/test'
+
+test.describe('r3f-dynamic-tree', () => {
+  test('works', async ({page}) => {
+    test.setTimeout(30000)
+    await page.goto('./tests/r3f-dynamic-tree/')
+
+    const toolbar = page.locator(
+      '[data-testid="theatre-extensionToolbar-global"]',
+    )
+
+    const snapshotButton = toolbar.getByRole('button').nth(0)
+    await snapshotButton.click()
+
+    const pane = page.getByTestId('theatre-pane-content-snapshot #1')
+    await expect(pane).toHaveScreenshot({})
+
+    const forwardButton = toolbar.getByRole('button', {name: '>'})
+    await forwardButton.click()
+    await forwardButton.click()
+    await forwardButton.click()
+    await expect(pane).toHaveScreenshot({})
+  })
+})

packages/r3f/package.json

@@ -54,6 +54,7 @@
     "@types/node": "^15.6.2",
     "@types/react": "^17.0.9",
     "@types/styled-components": "^5.1.9",
+    "@types/three": "0.131.0",
     "esbuild": "^0.18.17",
     "esbuild-register": "^3.4.2",
     "lodash-es": "^4.17.21",
@@ -65,6 +66,7 @@
     "react-use-measure": "^2.0.4",
     "reakit": "^1.3.8",
     "styled-components": "^5.3.5",
+    "three": "0.131.3",
     "typescript": "^4.4.2",
     "zustand": "^3.5.1"
   },