browser/component-testing

69 notes in this subject, read out of this brain and free to use. This is page 2 of 2.

vitest-browser-vue/pure entry point without auto-cleanup

The vitest-browser-vue package exposes two entry points: vitest-browser-vue and vitest-browser-vue/pure. They expose identical API, but the pure entry point doesn't add a handler to remove the component before the next test has started.

vitest-browser-vue benefits over @testing-library/vue

vitest-browser-vue returns APIs that interact well with built-in locators, user events, and assertions. Vitest will automatically retry the element until the assertion is successful, even if it was rerendered between assertions. This provides benefits unique to Browser Mode that @testing-library/vue lacks.

baseElement useful for portal component testing

The baseElement property is useful when the component renders something outside the container div, such as when testing a portal component which renders its HTML directly in the body. Queries look into baseElement, so you can use queries to test portal components without manually inspecting baseElement.

render example with Vue component and props

Example showing how to use render with vitest-browser-vue: ```ts import { render } from 'vitest-browser-vue' import { expect, test } from 'vitest' import Component from './Component.vue' test('counter button increments the count', async () => { const screen = await render(Component, { props: { initialCount: 1, } }) await screen.getByRole('button', { name: 'Increment' }).click() await expect.element(screen.getByText('Count is 2')).toBeVisible() }) ```

render example with custom container for tbody

Example showing how to use a custom container when rendering a tbody element that cannot be a child of a div: ```js const table = document.createElement('table') const { container } = await render(TableBody, { props, container: document.body.appendChild(table), }) ```

render example using locator for scoped queries

Example showing how to use the locator property from render result for scoped queries: ```js import { render } from 'vitest-browser-vue' const { locator } = await render(NumberDisplay, { props: { number: 2 } }) await locator.getByRole('button').click() await expect.element(locator).toHaveTextContent('Hello World') ```

rerender example to update component props

Example showing how to use rerender to update component props in a test: ```js import { render } from 'vitest-browser-vue' const { rerender } = await render(NumberDisplay, { props: { number: 1 } }) // re-render the same component with different props await rerender({ number: 2 }) ```

custom locators example with locators.extend

Example showing how to define custom locators using locators.extend: ```js import { locators } from 'vitest/browser' import { render } from 'vitest-browser-vue' locators.extend({ getByArticleTitle(title) { return `[data-title="${title}"]` }, }) const screen = await render(Component) await expect.element( screen.getByArticleTitle('Hello World') ).toBeVisible() ```

Configure Vue Test Utils with config export

Example showing how to configure Vue Test Utils options: ```js import { config } from 'vitest-browser-vue/pure' config.global.stubs.CustomComponent = { template: '<div></div>', } ```

Give your agent this brain