vue.js 小程序_Vue.js测试实用程序库

vue.js 小程序

阿佛里亚兹 (avoriaz)

This library will be deprecated once vue-test-utils is released.

vue-test-utils发布后，将不推荐使用该库。

View demo 查看演示 Download Source 下载源

安装 (Installation)

npm install --save-dev avoriaz

例子 (Examples)

断言包装器包含一个孩子 (Assert wrapper contains a child)

import { mount } from 'avoriaz'
import Foo from './Foo.vue'

const wrapper = mount(Foo)
expect(wrapper.contains('.bar')).to.equal(true)

浅渲染组件 (Shallow render components)

import { shallow } from 'avoriaz'
import Foo from './Foo.vue'
import Bar from './Bar.vue'

const wrapper = shallow(Foo)
expect(wrapper.contains(Bar)).to.equal(true)

断言样式被渲染 (Assert style is rendered)

const button = wrapper.find('div > button .button-child')[0]
expect(button.hasStyle('color', 'red')).to.equal(true)

触发DOM事件时调用断言方法 (Assert method is called when DOM event is triggered)

const clickHandler = sinon.stub()
const wrapper = mount(Foo, {
  propsData: { clickHandler }
})
wrapper.find('div .bar')[0].trigger('click')
expect(clickHandler.called).to.equal(true)

断言包装包含文本 (Assert wrapper contains text)

const title = wrapper.find('h1.title')[0]
expect(title.text()).to.equal('some text')

注入全局变量 (Inject globals)

const $route = { path: 'http://www.example-path.com' }
const wrapper = mount(Foo, { 
    globals: {
        $route
    }
})
expect(wrapper.vm.$route.path).to.equal($route.path)

注入插槽 (Inject slots)

const wrapper = mount(Foo, { 
    slots: {
        default: Foo
    }
})

设定资料 (Set data)

wrapper.setData({
  someData: 'some data'
})

expect(wrapper.vm.someData).to.equal('some data')

更新道具 (Update props)

wrapper.setProps({
  someProp: 'some prop',
  anotherProp: 'another prop'
})

翻译自: https://vuejsexamples.com/a-vue-js-testing-utility-library/

vue.js 小程序