examples.mdx

id	title
examples	Examples

Basic example

<template>
  <div>
    <p>Times clicked: {{ count }}</p>
    <button @click="increment">increment</button>
  </div>
</template>

<script>
  export default {
    data: () => ({
      count: 0,
    }),

    methods: {
      increment() {
        this.count++
      },
    },
  }
</script>

import { render, fireEvent } from '@testing-library/vue'
import Component from './Component.vue'

test('increments value on click', async () => {
  // The render method returns a collection of utilities to query your component.
  const { getByText } = render(Component)

  // getByText returns the first matching node for the provided text, and
  // throws an error if no elements match or if more than one match is found.
  getByText('Times clicked: 0')

  const button = getByText('increment')

  // Dispatch a native click event to our button element.
  await fireEvent.click(button)
  await fireEvent.click(button)

  getByText('Times clicked: 2')
})

Example using v-model:

<template>
  <div>
    <p>Hi, my name is {{ user }}</p>

    <label for="username">Username:</label>
    <input v-model="user" id="username" name="username" />
  </div>
</template>

<script>
  export default {
    data: () => ({
      user: 'Alice',
    }),
  }
</script>

import { render, fireEvent } from '@testing-library/vue'
import Component from './Component.vue'

test('properly handles v-model', async () => {
  const { getByLabelText, getByText } = render(Component)

  // Asserts initial state.
  getByText('Hi, my name is Alice')

  // Get the input DOM node by querying the associated label.
  const usernameInput = getByLabelText(/username/i)

  // Updates the <input> value and triggers an `input` event.
  // fireEvent.input() would make the test fail.
  await fireEvent.update(usernameInput, 'Bob')

  getByText('Hi, my name is Bob')
})

Example using props:

<template>
  <div>
    <label>{{ label }}</label>
  </div>
</template>

<script>
export default {
  name: 'FormInput',
  props: {
    label: { type: String, default: 'Default label' }
  },
}
</script>

import { render } from '@testing-library/vue'
import FormInput from './FormInput.vue'

it('renders the correct default state', () => {
  const { getByText } = render(FormInput)

  // Asserts initial state.
  getByText('Default label')
})

it('renders the label prop', () => {
  const props = {
    label: 'The new label',
  }
  const { getByText } = render(FormInput, {
    props,
  })

  getByText(props.label)
})

More examples

You'll find examples of testing with different libraries in the test directory.

Some included are:

• vuex
• vue-router
• vee-validate
• vue-i18n
• vuetify