【测试学习】UI测试工具vue-test-utils APIs

朱典

2023-12-01

参考文章：
官方文档
API
mount()
shallowMount()
render()
renderToString()
选择器
createLocalVue()
createWrapper(node [, options])
配置
enableAutoDestroy(hook)

mount()

参数：
{Component} component
{Object} options
返回值： {Wrapper}
这个的选项比较多。
用法：
创建一个包含被挂载和渲染的 Vue 组件的 Wrapper。

import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'
// without options 只给构造函数传【一个】参数
describe('Foo', () => {
  it('renders a div', () => {
    const wrapper = mount(Foo)
    expect(wrapper.contains('div')).toBe(true)
  })
})

// 使用Vue选项 在构造函数的【第二个参数】
describe('Foo', () => {
  it('renders a div', () => {
    const wrapper = mount(Foo, {
      propsData: {
        color: 'red'
      }
    })
    expect(wrapper.props().color).toBe('red')
  })
})
//——————————————————————————————————————————
// 固定在 DOM 上  在选项中添加【attachTo】属性
describe('Foo', () => {
  it('renders a div', () => {
    const div = document.createElement('div')
    document.body.appendChild(div)
    const wrapper = mount(Foo, {
      attachTo: true
    })
    expect(wrapper.contains('div')).toBe(true)
    wrapper.destroy()
  })
})
//——————————————————————————————————————————
// 默认插槽和具名插槽 在选项中添加【slots】属性
// 需要多引入两个组件
// import { mount } from '@vue/test-utils'
// import Foo from './Foo.vue'
// import Bar from './Bar.vue'
// import FooBar from './FooBar.vue'

describe('Foo', () => {
  it('renders a div', () => {
    const wrapper = mount(Foo, {
      slots: {
        default: [Bar, FooBar],
        fooBar: FooBar, // 将匹配 `<slot name="FooBar" />`。
        foo: '<div />'
      }
    })
    expect(wrapper.contains('div')).toBe(true)
  })
})
//——————————————————————————————————————————
// 将全局属性存根 在选项中添加【mocks】属性
describe('Foo', () => {
  it('renders a div', () => {
    const $route = { path: 'http://www.example-path.com' }
    const wrapper = mount(Foo, {
      mocks: {
        $route
      }
    })
    expect(wrapper.vm.$route.path).toBe($route.path)
  })
})
//——————————————————————————————————————————
// 将组件存根 在选项中添加【stubs】属性
describe('Foo', () => {
  it('renders a div', () => {
    const wrapper = mount(Foo, {
      stubs: {
        BarFoo: true,
        FooBar: Faz,
        Bar: { template: '<div class="stubbed" />' }
      }
    })
    expect(wrapper.contains('.stubbed')).toBe(true)
    expect(wrapper.contains(Bar)).toBe(true)
  })
})

shallowMount()

参数：
{Component} component
{Object} options
返回值： {Wrapper}
选项： 同mount()
用法：
和 mount 一样，创建一个包含被挂载和渲染的 Vue 组件的 Wrapper，不同的是被存根的子组件。
具体代码略，基本就是把mount换成shallowMount

render()

参数：

{Component} component
{Object} options
	{Object} context
		{Array<Component|Object>|Component} children
	{Object} slots
		{Array<Component|Object>|Component|String} default
		{Array<Component|Object>|Component|String} named
	{Object} mocks
	{Object|Array<string>} stubs
	{Vue} localVue

返回值： {Promise< CheerioWrapper>}
**选项：**也是和mount一样
使用：
将一个对象渲染成为一个字符串并返回一个 cheerio 包裹器
Cheerio 是一个类似 jQuery 的库，可以在 Node.js 中游览 DOM 对象。它的 API 和 Vue Test Utils 的 Wrapper 类似。
render 在底层使用 vue-server-renderer 将一个组件渲染为静态的 HTML。
render 被包含在了 @vue/server-test-utils 包之中。
具体代码，和mount只有一点点不一样

import { render } from '@vue/server-test-utils'
import Foo from './Foo.vue'

describe('Foo', () => {
  it('renders a div', async () => {
    const wrapper = await render(Foo)
    expect(wrapper.text()).toContain('<div></div>')
  })
})

可以看出，只是在调用构造函数的时候，调用render函数，并且使用await语句。

renderToString()

参数：

{Component} component
{Object} options
	{Object} context
		{Array<Component|Object>|Component} children
	{Object} slots
		{Array<Component|Object>|Component|String} default
		{Array<Component|Object>|Component|String} named
	{Object} mocks
	{Object|Array<string>} stubs
	{Vue} localVue

返回值： {Promise< string>}
选项： 跟mount一样
使用：将一个组件渲染为 HTML。
renderToString 在底层使用 vue-server-renderer 将一个组件渲染为 HTML。
具体代码只需要将上面的render替换成renderToString。

选择器

1、可以处理任何有效的CSS选择器

挂载处理任何有效的 CSS 选择器：
标签选择器 (div、foo、bar)
类选择器 (.foo、.bar)
特性选择器 ([foo]、[foo=“bar”])
id 选择器 (#foo、#bar)
伪选择器 (div:first-of-type)

你也可以结合使用：
直接从属结合 (div > #bar > .foo)
一般从属结合 (div #bar .foo)
近邻兄弟选择器 (div + .foo)
一般兄弟选择器 (div ~ .foo)

2、Vue组件

const wrapper = shallowMount(Foo) // Foo是引入的一个组件
expect(wrapper.is(Foo)).toBe(true)

3、Name

const buttonWrapper = wrapper.find({ name: 'my-button' })
buttonWrapper.trigger('click')

4、Ref

const buttonWrapper = wrapper.find({ ref: 'myButton' })
buttonWrapper.trigger('click')

createLocalVue()

参数：
{Object} options
{Function} errorHandler
返回值：{Component}
用法：
createLocalVue 返回一个 Vue 的类供你添加组件、混入和安装插件而不会污染全局的 Vue 类。
在组件渲染功能和观察者期间，errorHandler选项可用于处理未捕获的错误。
可通过 options.localVue 来使用：

// Without options:
import { createLocalVue, shallowMount } from '@vue/test-utils'
import MyPlugin from 'my-plugin'
import Foo from './Foo.vue'

const localVue = createLocalVue()
localVue.use(MyPlugin)
const wrapper = shallowMount(Foo, {
  localVue,
  mocks: { foo: true }
})
expect(wrapper.vm.foo).toBe(true)

const freshWrapper = shallowMount(Foo)
expect(freshWrapper.vm.foo).toBe(false
//——————————————————————————————————————————
// 使用errorHandler选项:
import { createLocalVue, shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'

const errorHandler = (err, vm, info) => {
  expect(err).toBeInstanceOf(Error)
}

const localVue = createLocalVue({
  errorHandler
})

// Foo在生命周期挂钩中引发错误
const wrapper = shallowMount(Foo, {
  localVue
})

createWrapper()

参数：

{vm|HTMLElement} node
{Object} options
	{Boolean} attachedToDocument

返回值：{Wrapper}
用法： createWrapper 为一个被挂载的 Vue 实例或一个 HTML 元素创建一个 Wrapper。

import { createWrapper } from '@vue/test-utils'
import Foo from './Foo.vue'

const Constructor = Vue.extend(Foo)
const vm = new Constructor().$mount()
const wrapper = createWrapper(vm)
expect(wrapper.vm.foo).toBe(true)

Vue.extend的作用是：使用基础 Vue 构造器，创建一个“子类”。

配置（应该是全局的）

1、showDeprecationWarnings

类型： Boolean
默认值： true
作用： 控制是否展示废弃警告。当设置为 true 时，所有的废弃警告都将会在控制台中打印出来。
示例：

import { config } from '@vue/test-utils'

config.showDeprecationWarnings = false

2、stubs

类型：{ [name: string]: Component | boolean | string }
默认值：{}
存储在 config.stubs 中的存根会被默认使用。用到的组件存根。它们会被传入挂载选项的 stubs 覆写。
当把 stubs 作为一个数组传入挂载选项时，config.stubs 会被转换为一个数组，然后用只返回一个 <${component name}-stub> 的基础组件进行存根。
示例：

import { config } from '@vue/test-utils'
config.stubs['my-component'] = '<div />'

3、mocks

类型： Object
默认值：{}
默认使用传递给 config.mocks 的值，类似 stubs。传递给挂载选项中 mocks 对象的任何值都会优先于 config.mocks 中的同名声明。
示例：

import { config } from '@vue/test-utils'

config.mocks['$store'] = {
  state: {
    id: 1
  }
}

4、methods

5、provide

enableAutoDestroy(hook)

参数：{Function} hook
用法： enableAutoDestroy 将会使用被传入的该钩子函数 (例如 afterEach) 销毁所有被创建的 Wrapper 实例。在调用这个方法之后，你可以通过调用 resetAutoDestroyState 方法恢复到默认行为。

import { enableAutoDestroy, mount } from '@vue/test-utils'
import Foo from './Foo.vue'

// 将会在每个测试之后运行 `wrapper.destroy()`
enableAutoDestroy(afterEach)

describe('Foo', () => {
  it('renders a div', () => {
    const wrapper = mount(Foo)
    expect(wrapper.contains('div')).toBe(true)
    // 不需要在此运行 `wrapper.destroy()`
  })
})

【测试学习】UI测试工具vue-test-utils APIs

mount()

shallowMount()

render()

renderToString()

选择器

1、可以处理任何有效的CSS选择器

2、Vue组件

3、Name

4、Ref

createLocalVue()

createWrapper()

配置（应该是全局的）

1、showDeprecationWarnings

2、stubs

3、mocks

4、methods

5、provide

enableAutoDestroy(hook)

相关阅读

相关文章

相关问答

相关文档