Vue Testing Library

简单且完整的 Vue.js 测试工具，鼓励良好的测试实践。

Vue Testing Library 是一个构建在 DOM Testing Library 和 @vue/test-utils 之上的轻量级适配器。

安装

本模块通过 npm 分发，应作为您项目的 devDependencies 之一进行安装：

npm install --save-dev @testing-library/vue

该库包含 peerDependencies 个针对 Vue 3 和 @vue/compiler-sfc 的列表。

您可能还希望安装 jest-dom，以便使用自定义 Jest 匹配器。

如果您使用的是 Vue 2，请安装该库的第 5 版：

npm install --save-dev @testing-library/vue@^5

一个基础示例

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

<script>
  export default {
    name: 'Button',
    data: () => ({
      count: 0,
    }),
    methods: {
      increment() {
        this.count++
      },
    },
  }
</script>

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

test('increments value on click', async () => {
  // The `render` method renders the component into the document.
  // It also binds to `screen` all the available queries to interact with
  // the component.
  render(Button)

  // queryByText returns the first matching node for the provided text
  // or returns null.
  expect(screen.queryByText('Times clicked: 0')).toBeTruthy()

  // getByText returns the first matching node for the provided text
  // or throws an error.
  const button = screen.getByText('increment')

  // Click a couple of times.
  await fireEvent.click(button)
  await fireEvent.click(button)

  expect(screen.queryByText('Times clicked: 2')).toBeTruthy()
})