Vue Testing Library
made with Vuejs

Vue Testing Library

这是一个简单完整的测试实用工具。

相关问答
暂无相关问题
查看全部
简介及使用教程

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()
})

示例

image.png

作者

Daniel Cook

@coder_cook

相关项目