https://github.com/vitest-dev/vitest-browser-vue

Render Vue components in Vitest Browser Mode
https://github.com/vitest-dev/vitest-browser-vue

Last synced: about 2 months ago
JSON representation

Render Vue components in Vitest Browser Mode

• Host: GitHub
• URL: https://github.com/vitest-dev/vitest-browser-vue
• Owner: vitest-dev
• Created: 2024-08-06T11:42:07.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-09-26T12:16:01.000Z (3 months ago)
• Last Synced: 2024-10-30T09:33:44.799Z (about 2 months ago)
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/vitest-browser-vue
• Size: 288 KB
• Stars: 15
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vitest-browser-vue

Render Vue components in Vitest Browser Mode. This library follows `testing-library` principles and exposes only [locators](https://vitest.dev/guide/browser/locators) and utilities that encourage you to write tests that closely resemble how your Vue components are used.

Requires `vitest` and `@vitest/browser` 2.1.0 or higher.

```ts

import { render } from 'vitest-browser-vue'

import { expect, test } from 'vitest'

test('counter button increments the count', async () => {

  const screen = render(Component, {

    props: {

      initialCount: 1,

    }

  })

  await screen.getByRole('button', { name: 'Increment' }).click()

  await expect.element(screen.getByText('Count is 2')).toBeVisible()

})

```

`vitest-browser-vue` also automatically injects `render` and `cleanup` methods on the `page`. Example:

```ts

// vitest.config.ts

import { defineConfig } from 'vitest/config'

export default defineConfig({

  test: {

    // if the types are not picked up, add `vitest-browser-vue` to

    // "compilerOptions.types" in your tsconfig or

    // import `vitest-browser-vue` manually so TypeScript can pick it up

    setupFiles: ['vitest-browser-vue'],

    browser: {

      name: 'chromium',

      enabled: true,

    },

  },

})

```

```ts

import { page } from '@vitest/browser/context'

test('counter button increments the count', async () => {

  const screen = page.render(Component, {

    props: {

      initialCount: 1,

    }

  })

  screen.cleanup()

})

```

Unlike `@testing-library/vue`, `vitest-browser-vue` cleans up the component before the test starts instead of after, so you can see the rendered result in your UI. To avoid auto-cleanup, import the `render` function from `vitest-browser-vue/pure`.

## Special thanks

- Powered by [`@vue/test-utils`](https://github.com/vuejs/test-utils/)

- Inspired by [`@testing-library/vue`](https://github.com/testing-library/vue-testing-library)