The Official Unit Testing Utility Library for Vue.js Is Now Available

综合技术 Laravel News (源链)

Vue.js now has an official unit testing library for testing Vue applications. It provides methods for unit testing your components.

A 1.0 beta version shipped Monday, as well as an official guide to help you get started with standard tips, using test runners, and testing components which use Vuex (centralized state management for Vue).

Here’s an example of unit testing a Vue component with the utils library:

import { mount } from 'vue-test-utils'
import Counter from './counter'

describe('Counter', () => {
  // Now mount the component, and you have the wrapper.
  const wrapper = mount(Counter)

  it('renders the correct markup', () => {
    expect(wrapper.html()).toContain('0')
  })

  // It's also easy to check for the existence of elements.
  it('has a button', () => {
    expect(wrapper.contains('button')).toBe(true)
  })
})

According to the guide, here’s an overview of how vie-test-utils
works:

vue-test-utils tests Vue components by mounting them in isolation, mocking the necessary inputs (props, injections and user events) and asserting the outputs (render result, emitted custom events).

Mounted components are returned inside a Wrapper, which exposes many convenience methods for manipulating, traversing and querying the underlying Vue component instance.

Taking the above example, you could interact with the counter and make assertions with the following as outlined in the documentation
.

it('button click should increment the count', () => {
  expect(wrapper.vm.count).toBe(0)
  const button = wrapper.find('button')
  button.trigger('click')
  expect(wrapper.vm.count).toBe(1)
})

Check out the official guide
and starter project to get familiar with testing Vue applications with the official test utils library.

您可能感兴趣的

vue 项目中实用的小技巧 # 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm安装时,可能会出现一系列的错误 1、安装jQuery npm install jquery 2、安装Bootstrap ...
Write Unit Tests For Your WordPress Plugin Using P... Git clone the WordPress develop repository somewhere on your hard drive: git clone git@github.com:WordPress/wordpress-develop.git Comment ...
React JS vs Vue JS – Which Javascript Framework To... ReactJSin 2016 has positioned itself as the king of Javascript web frameworks . The year 2017 has been observing a rapid growth of both its web an...
Building a realtime dashboard powered by Laravel a... At Spatie we have a tv screen against the wall that displays a dashboard. This dashboard displays the tasks our team should be working on, importa...
Cardano中的半形式化开发方法 Semi-Formal Development: The Cardano Wallet 把形式化的建模和QuickCheck的测试结合在一起,是开发高可信软件的一把利刃。 通过对不变量的测试来保证模型的一致性,通过和模型的比对来保证真实实现的正确性。 Well-Typed给IOH...
Laravel News责编内容来自:Laravel News (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » The Official Unit Testing Utility Library for Vue.js Is Now Available



专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录