Skip to main content

测试Vue组件

Vue Test Utils​

Vue Test Utils是专门针对测试Vue组件的一个扩展库，提供了面向Vue组件对应的API和工具。Vue Test Utils可以与各种测试框架一起使用，如Jest、Mocha、AVA等，还支持在Node.js环境和浏览器中运行测试。

  1. 模拟用户操作：Vue Test Utils 提供了一组 API，如wrapper.trigger()和wrapper.setProps()，可以模拟用户在组件上执行的各种操作，如点击、输入、滚动等。
  2. 访问组件实例：Vue Test Utils 可以让你获得组件实例，然后你可以检查它们的状态、计算属性、方法等。你可以使用wrapper.vm访问组件实例。
  3. 断言组件渲染结果：Vue Test Utils 提供了一组 API，如wrapper.find( )和wrapper.contains( )，可以检查组件是否渲染了正确的内容。你还可以使用wrapper.html() 获取组件的 HTML 代码，以便于在测试中进行比较。
  4. 支持插件：Vue Test Utils 支持 Vue.js 插件，你可以使用localVue.use( )在测试中安装插件。
  5. 支持异步操作：Vue Test Utils 支持异步操作，你可以使用wrapper.vm.$nextTick()等方法等待异步操作完成后再进行测试断言。

Vue Test Utils 提供了丰富的 API，可以帮助你编写高质量的 Vue.js 组件测试。它可以让你轻松测试组件的各种行为和渲染结果，并且易于集成到你的测试工作流程中。

基本测试​

import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message'
    const wrapper = shallowMount(HelloWorld, {
      props: { msg }
    })
    expect(wrapper.text()).toMatch(msg)
  })
})

mount代表渲染一个组件，shallowMount代表浅渲染(不渲染子组件)，渲染之后会得到一个对象，该对象上面提供了一系列的方法，方便访问和操作组件的属性、样式以及渲染结果之类的。

常用方法​

  • find(selector): 在组件的渲染结果中查找符合选择器的元素。
  • findAll(selector): 在组件的渲染结果中查找所有符合选择器的元素。
  • trigger(eventType, eventData): 触发组件的事件。
  • setProps(props): 设置组件的属性。
  • setData(data): 设置组件的数据。
  • text(): 获取组件的文本内容。
  • html(): 获取组件的 HTML 代码。
tip

使用@vue/cli搭建的项目，在集成jest的时候默认配置的只检查.spec 的文件，如果想要检测.test类型的文件，需要进行配置，在jest.config.js里面进行一个配置：

module.exports = {
  // ...
  testMatch : [
    "**/tests/**/*.[jt]s?(x)", 
    "**/?(*.)+(spec|test).[jt]s?(x)"
  ]
}

测试快照​

在测试时，也可生成测试快照：

expect(wrapper.element).toMatchSnapshot()
Last updated on