Add more compat tests

compat-tests/fixtures/vite4/package/src/App/App.tsx

@@ -1,5 +1,5 @@
 import {getProject} from '@theatre/core'
-import React, {useEffect} from 'react'
+import React, {useEffect, useRef} from 'react'
 import {Canvas} from '@react-three/fiber'
 import {editable as e, SheetProvider, PerspectiveCamera} from '@theatre/r3f'
 import state from './state.json'
@@ -16,19 +16,24 @@ function Plane({color, theatreKey, ...props}: any) {
 }
 
 export default function App() {
-  const [light2, setLight2] = React.useState<any>(null)
+  const light2Ref = useRef<any>()
 
   useEffect(() => {
-    if (!light2) return
+    const interval = setInterval(() => {
+      if (!light2Ref.current) return
+
+      clearInterval(interval)
+
+      const intensityInStateJson = 3
+      const currentIntensity = light2Ref.current.intensity
+      if (currentIntensity !== intensityInStateJson) {
+        console.error(`Test failed: light2.intensity is ${currentIntensity}`)
+      } else {
+        console.log(`Test passed: light2.intensity is ${intensityInStateJson}`)
+      }
+    }, 50)
     // see the note on <e.pointLight theatreKey="Light 2" /> below to understand why we're doing this
-    const intensityInStateJson = 3
-    const currentIntensity = light2.intensity
-    if (currentIntensity !== intensityInStateJson) {
-      console.error(`Test failed: light2.intensity is ${currentIntensity}`)
-    } else {
-      console.log(`Test passed: light2.intensity is ${intensityInStateJson}`)
-    }
-  }, [light2])
+  }, [])
 
   return (
     <Canvas
@@ -58,7 +63,7 @@ export default function App() {
           intensity={2}
           color="#e4be00"
           theatreKey="Light 2"
-          ref={setLight2}
+          ref={light2Ref}
         />
 
         <group position={[0, -0.9, -3]}>

compat-tests/fixtures/vite4/vite4.compat-test.ts

@@ -2,8 +2,6 @@
 import {$, cd, path, ProcessPromise} from '@cspotcode/zx'
 import {testServerAndPage} from '../../utils/testUtils'
 
-$.verbose = false
-
 const PATH_TO_PACKAGE = path.join(__dirname, `./package`)
 
 describe(`vite4`, () => {
@@ -21,22 +19,22 @@ describe(`vite4`, () => {
       return $`npm run preview -- --port ${port}`
     }
 
-    async function waitTilServerIsReady(
-      process: ProcessPromise<unknown>,
-      port: number,
-    ): Promise<{
-      url: string
-    }> {
-      for await (const chunk of process.stdout) {
-        if (chunk.toString().includes('--host')) {
-          // vite's server is running now
-          break
-        }
-      }
+    testServerAndPage({
+      startServerOnPort,
+      checkServerStdoutToSeeIfItsReady: (chunk) => chunk.includes('--host'),
+    })
+  })
 
-      return {url: `http://localhost:${port}`}
+  describe(`vite dev`, () => {
+    function startServerOnPort(port: number): ProcessPromise<unknown> {
+      cd(PATH_TO_PACKAGE)
+
+      return $`npm run dev -- --port ${port}`
     }
 
-    testServerAndPage({startServerOnPort, waitTilServerIsReady})
+    testServerAndPage({
+      startServerOnPort,
+      checkServerStdoutToSeeIfItsReady: (chunk) => chunk.includes('--host'),
+    })
   })
 })