Vue Testing Library
made with Vuejs

Vue Testing Library是一个简单完整的测试实用工具，是DOM Testing Library 和 @vue/test-utils的轻量级适配器。

Vue Testing Library是基于Kent C. Dodds的dom-testing-library构建，是基于react （react-testing-library）的实现，鼓励使用集成测试来为DOM交互建模。

安装

Npm

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

Yarn

yarn add @testing-library/vue --save-dev 

使用

Button.vue文件：

<template>
  <div>
    <p>Times clicked: {{ count }}</p>
    <button @click="increment">increment</button>
  </div>
</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 () => {
  // `render`方法，解析组件到document，也绑定 `screen` 的所有与组件交互的有效请求。
  render(Button)

  // queryByText 返回与之匹配的第一个节点或者null
  expect(screen.queryByText('Times clicked: 0')).toBeTruthy()

  // getByText  返回与之匹配的第一个节点或者抛出错误

  const button = screen.getByText('increment')

  // 点击几次
  await fireEvent.click(button)
  await fireEvent.click(button)

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

示例