[英]How can I solve problem with vuex and unit-testing?
我正在嘗試第一次使用 mocha 編寫和運行單元測試,但遇到了一些問題。 我有一個用Table.vue
編寫的組件 Table.vue
<v-container>
<h1>Table</h1>
<v-layout
text-center
wrap
>
<v-simple-table v-if="table.length">
<template v-slot:default>
<thead>
<tr>
<th class="text-left">Id</th>
<th class="text-left">Name</th>
<th class="text-left">Description</th>
<th class="text-left">Action</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in table" :key="index">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.description }}</td>
<td>
<v-btn
color="blue"
:to="{name: 'create', params: { item: item, id: item.id }}"
>
Update
</v-btn>
<v-btn
color="red"
@click="show(item)"
>
Delete
</v-btn>
</td>
</tr>
</tbody>
</template>
</v-simple-table>
</v-layout>
<v-btn
:to="{name: 'create'}"
color="primary"
>
<span class="mr-2">Create</span>
</v-btn>
<modal name="hello-world">
<v-container>
<v-layout
text-center
wrap
>
Are you sure you eant to remove this item?
</v-layout>
<v-layout
text-center
wrap
>
<v-btn
color="red"
@click="deleteItem"
>
Yes
</v-btn>
<v-btn
color="primary"
@click="hide"
>
No
</v-btn>
</v-layout>
</v-container>
</modal>
</v-container>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
name: "Table",
data() {
return {
itemToRemove: null
}
},
methods: {
...mapActions([
'removeItem'
]),
show (item) {
this.$modal.show('hello-world');
this.itemToRemove = item
},
hide () {
this.$modal.hide('hello-world');
this.itemToRemove = null
},
deleteItem () {
this.removeItem(this.itemToRemove)
this.hide()
}
},
computed:
mapState({
table: state => state.table.table
})
}
</script>
<style scoped>
</style>
我想在那里進行測試。 我在tests/unit
文件夾中有文件table.spec.js
import { expect } from 'chai'
import { shallowMount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import Table from '@/components/Table.vue'
const localVue = createLocalVue()
localVue.use(Vuex)
const store = new Vuex.Store({
state: {}
})
describe('Table.vue', () => {
it('renders h1 tag', () => {
const wrapper = shallowMount(Table, {localVue, store})
expect(wrapper.find('h1').text().equal('Table'))
})
})
當我運行命令npm run test:unit
我有錯誤1) Table.vue renders h1 tag: TypeError: Cannot read property 'table' of undefined
previous it was error with text Cannot read property 'state' of undefined
我試圖在測試中包含 vuex,但這是我第一次使用單元測試,看起來我做錯了什么
我需要通過我的測試,也許有人可以幫助我為某些事件編寫新測試,例如單擊按鈕並調用操作。 提前致謝
您必須通讀https://vue-test-utils.vuejs.org/guides/using-with-vuex.html
他們有 mocking vuex 的很好的例子,這是你需要做的。 它看起來像這樣:
import { shallowMount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import Actions from '../../../src/components/Actions'
const localVue = createLocalVue()
localVue.use(Vuex)
describe('Actions.vue', () => {
let actions
let store
beforeEach(() => {
actions = {
actionClick: jest.fn(),
actionInput: jest.fn()
}
store = new Vuex.Store({
actions
})
})
it('dispatches "actionInput" when input event value is "input"', () => {
const wrapper = shallowMount(Actions, { store, localVue })
const input = wrapper.find('input')
input.element.value = 'input'
input.trigger('input')
expect(actions.actionInput).toHaveBeenCalled()
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.