test: add test from the readme example

README.md

@@ -11,7 +11,7 @@ import { expect, test } from 'vitest'
 test('counter button increments the count', async () => {
   const screen = render(Component, {
     props: {
-      count: 1,
+      initialCount: 1,
     }
   })
 
@@ -43,7 +43,7 @@ import { page } from '@vitest/browser/context'
 test('counter button increments the count', async () => {
   const screen = page.render(Component, {
     props: {
-      count: 1,
+      initialCount: 1,
     }
   })
 

package.json

@@ -46,27 +46,27 @@
     "lint:fix": "pnpm lint --fix"
   },
   "peerDependencies": {
-    "@vitest/browser": "^2.1.0-beta.1",
-    "vitest": "^2.1.0-beta.1",
+    "@vitest/browser": "^2.1.0-beta.3",
+    "vitest": "^2.1.0-beta.3",
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@vitest/pretty-format": "^2.1.0-beta.1",
+    "@vitest/pretty-format": "^2.1.0-beta.3",
     "@vue/test-utils": "^2.4.6",
     "vitest-browser-utils": "^0.0.1"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^2.24.1",
     "@vitejs/plugin-vue": "^5.1.2",
-    "@vitest/browser": "^2.1.0-beta.1",
+    "@vitest/browser": "^2.1.0-beta.3",
     "bumpp": "^9.4.2",
     "changelogithub": "^0.13.9",
     "eslint": "^9.8.0",
     "playwright": "^1.46.0",
     "tsup": "^8.2.4",
     "tsx": "^4.16.5",
     "typescript": "^5.5.4",
-    "vitest": "^2.1.0-beta.1",
+    "vitest": "^2.1.0-beta.3",
     "vue": "^3.4.35",
     "zx": "^8.1.4"
   }

src/pure.ts

@@ -20,7 +20,7 @@ export interface Screen<Props> extends LocatorSelectors {
   rerender(props: Partial<Props>): void
 }
 
-export interface ComponentRenderOptions<C, P extends ComponentProps<C>> extends Omit<ComponentMountingOptions<C, P>, 'attachTo'> {
+export interface ComponentRenderOptions<C, P extends ComponentProps<C>> extends ComponentMountingOptions<C, P> {
   container?: HTMLElement
   baseElement?: HTMLElement
 }
@@ -41,6 +41,10 @@ export function render<T, C = T extends ((...args: any) => any) | (new (...args:
   const baseElement = customBaseElement || customContainer || document.body
   const container = customContainer || baseElement.appendChild(div)
 
+  if (mountOptions.attachTo) {
+    throw new Error('`attachTo` is not supported, use `container` instead')
+  }
+
   const wrapper = mount(Component, {
     ...mountOptions,
     attachTo: container,

test/__snapshots__/render.test.ts.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`renders component 1`] = `
+exports[`renders simple component 1`] = `
 <div>
   Hello World
 </div>

test/fixtures/Counter.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  initialCount: {
+    type: Number,
+    default: 0
+  }
+})
+
+const count = ref(props.initialCount)
+
+const increment = () => {
+  count.value++
+}
+</script>
+
+<template>
+  <div>Count is {{ count }}</div>
+  <button @click="increment">Increment</button>
+</template>