Vue.jsのユニットテスト

<template>
<p>Hello, {{name}}</p>
</template>
<script>
export default {
props: {
name: String
}
}
</script>
<style scoped></style>

describe(’MyComponent’, () => {
const Ctor = Vue.extend(MyComponent)
it(’says Hello’, () => {
const propsData = {name: ’Bob’}
const vm = new Ctor({propsData}).$mount()
expect(vm.$el.textContent).to.contain(’Hello, Bob’)
})
})

import {mount} from ‘vue-test-utils’
describe(’MyComponent’, () => {
it(’says Hello’, () => {
const propsData = {name: ’Bob’}
const wrapper = mount(MyComponent, {propsData})
expect(wrapper.text()).to.contain(’Hello, Bob’)
})
})

wrapper.text()
wrapper.html()
wrapper.trigger(‘click’)
wrapper.find(‘input#name’).trigger(‘input’)
wrapper.emitted()
wrapper.setData({foo: ‘bar’})
wrapper.vm.$el

mount(Component).html()
<div id=“parent”>
<div class=“foo”>
…
</div>
<kodomo-component />
</div>
shallow(Component).html()
<div id=“parent”>
<div class=“foo”>
…
</div>

</div>

describe(‘when API returns errors’, () => {
it(‘shows error message’, () => {
sinon.stub(ApiClient, ’request’).rejects(error)
wrapper.find(‘#submit-button’).trigger(‘click’)
expect(wrapper.text()).to.contain(‘やばい’)
})
})
//=> Fail

<button id=”submit-button” @click=“submit”>送信</button>
async submit() {
try {
await ApiClient.request(params)
} catch (error) {
this.showError(error.message)
}
}

describe(‘when API returns errors’, async () => {
it(‘shows error message’, () => {
sinon.stub(ApiClient, ’request’).rejects(error)
await Vue.nextTick()
})
})
//=> Success!

Vue.use(VueRouter)
//=> Vue.prototype をイジるためグローバルに影響がある

Vue.use(VueRouter)
Object.defineProperty(Vue.prototype, '$router', {
get () { return this._routerRoot._router }
})
Object.defineProperty(Vue.prototype, '$route', {
get () { return this._routerRoot._route }
})

Vue.use(VueRouter)
//=> $routerと$routeがモックできなくなる
mount(MyComponent, {
mocks: {
$route: {query: {number: 42}}
}
})
// setting a property that has only a getter

import {createLocalVue} from ‘vue-test-utils’
const localVue = createLocalVue()
localVue.use(VueRouter)
mount(MyComponent, {
localVue: localVue,
mocks: {
$route: {
query: {number: 42}
}
}
})

https://github.com/storybooks/storybook/blob/master/addons/storyshots/docs/storyshots-fail.png

Vue.jsのユニットテスト

Vue.jsのユニットテスト

More Related Content

More from Joe_noh

Vue.jsのユニットテスト