chore(vitest): add vitest browser beta 2 test

.gitignore

@@ -25,3 +25,4 @@ coverage
 *.sw?
 docs/.vitepress/dist/
 docs/.vitepress/cache/
+browser.json

.npmrc

@@ -1 +1,2 @@
-shamefully-hoist=true
+shamefully-hoist=true
+shell-emulator=true

package.json

@@ -48,6 +48,9 @@
     "dev": "cd playground && npm run dev",
     "build": "vite build",
     "playground": "cd playground && npm run dev",
+    "test:browser:none": "PROVIDER=none vitest",
+    "test:browser:playwright": "PROVIDER=playwright vitest",
+    "test:browser:webdriverio": "PROVIDER=webdriverio vitest",
     "test": "vitest",
     "test:ci": "vitest run",
     "test:ui": "vitest --ui --coverage.enabled=true",
@@ -80,9 +83,10 @@
     "@typescript-eslint/eslint-plugin": "^7.11.0",
     "@typescript-eslint/parser": "^7.11.0",
     "@vitejs/plugin-vue": "^5.0.5",
+    "@vitest/browser": "file:vitest-browser-2.0.0-beta.3.tgz",
     "@vitest/coverage-c8": "^0.33.0",
     "@vitest/coverage-v8": "^1.6.0",
-    "@vitest/ui": "^1.6.0",
+    "@vitest/ui": "file:vitest-ui-2.0.0-beta.3.tgz",
     "@vue/test-utils": "^2.4.6",
     "eslint": "^9.4.0",
     "eslint-plugin-vue": "^9.26.0",
@@ -108,7 +112,7 @@
     "vite-plugin-require-transform": "^1.0.21",
     "vite-svg-loader": "^5.1.0",
     "vitepress": "1.2.2",
-    "vitest": "^1.6.0",
+    "vitest": "file:vitest-2.0.0-beta.3.tgz",
     "vue": "^3.4.27",
     "vue-demi": "^0.14.8"
   }

src/components/TheExperience.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { BasicShadowMap, NoToneMapping } from 'three'
+
+const gl = {
+  clearColor: '#82DBC5',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  toneMapping: NoToneMapping,
+  windowSize: true,
+}
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[5, 5, 5]" :look-at="[0, 0, 0]" />
+    <TresMesh>
+      <TresSphereGeometry :args="[2, 32, 32]" />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>

src/components/TresCanvas.test.ts

@@ -0,0 +1,19 @@
+import { mount } from '@vue/test-utils'
+import TresCanvas from './TresCanvas.vue'
+import TheExperience from './TheExperience.vue'
+
+describe('tresCanvas', () => {
+  it('should work', () => {
+    const wrapper = mount(TheExperience, {
+      attachTo: document.body,
+      components: {
+        TresCanvas,
+      },
+    })
+    const canvas = wrapper.find('canvas')
+    expect(canvas).toBeDefined()
+    /* const canvas = wrapper.find('canvas')
+
+        expect(canvas.attributes('__spector_context_type')).toBe('webgl2') */
+  })
+})

vite.config.ts

@@ -17,6 +17,11 @@ import { bold, gray, lightGreen, yellow } from 'kolorist'
 
 import pkg from './package.json'
 
+function noop() {}
+
+const provider = process.env.PROVIDER || 'playwright'
+const browser = process.env.BROWSER || (provider === 'playwright' ? 'chromium' : 'chrome')
+
 // eslint-disable-next-line no-console
 console.log(`${lightGreen('▲')} ${gray('■')} ${yellow('●')} ${bold('Tres')} v${pkg.version}`)
 // https://vitejs.dev/config/
@@ -44,9 +49,37 @@ export default defineConfig({
     Inspect(),
   ],
   test: {
-    environment: 'jsdom',
+    // environment: 'jsdom',
+    // globals: true,
+    // threads: false,
+    // environment: process.env.BROWSER_TEST ? 'node' : 'jsdom',
     globals: true,
-    threads: false,
+    // threads: false,
+    // isolate: !process.env.BROWSER_TEST,
+    browser: {
+      enabled: true,
+      name: browser,
+      headless: false,
+      provider,
+      isolate: false,
+    },
+    open: false,
+    outputFile: './browser.json',
+    reporters: ['json', {
+      onInit: noop,
+      onPathsCollected: noop,
+      onCollected: noop,
+      onFinished: noop,
+      onTaskUpdate: noop,
+      onTestRemoved: noop,
+      onWatcherStart: noop,
+      onWatcherRerun: noop,
+      onServerRestart: noop,
+      onUserConsoleLog: noop,
+    }, 'default'],
+    env: {
+      BROWSER: browser,
+    },
   },
   build: {
     lib: {