我有一个规范，可以通过单击一个元素来测试方法是否有效，到目前为止它仍然有效，因为当我添加一个{{1}时，在组件上（我们将其命名为 Datatable.vue ） }，它会记录 test ，但是当我访问包装器数据时，它没有按预期更新。
以下是示例代码：
数据表组件脚本
console.log('test')数据表组件模板：
...
props: {
items: {
type: Array,
required: true
},
...
},
methods: {
/**
* clicking each column header will enable it to sort based on the key
* @params key: integer - key of the fields array being sorted
* @private
*/
sortItems(key) {
console.log('test')
const fieldKey = this.fields[key]
this.items = this.items.sort((a, b) => {
if (fieldKey === 'amount') {
if (parseFloat(a[fieldKey]) < parseFloat(b[fieldKey])) {
return -1
}
} else if (fieldKey === 'description' || fieldKey === 'name') {
if (a[fieldKey].toLowerCase() < b[fieldKey].toLowerCase()) {
return -1
}
} else {
if (a[fieldKey] < b[fieldKey]) {
return -1
}
}
})
},
数据表规范：
<table class="datatable-class">
<thead class="datatable-table-head">
<tr>
<th class="datatable-header" v-for="(field, key) in fields" :key="key" @click="sortItems(key)">
{{ field | capitalize }}
</th>
</tr>
</thead>
...
与UI预期的一样，当单击 时，它应基于降序排序，这将导致import { shallowMount } from '@vue/test-utils'
import Datatable from '@/components/Datatable.vue'
...
const items = [
{
id: '17528C9F-773F-1651-55AE-848FDAABE446',
name: 'Bertha Strong',
description: 'hendrerit.',
date: '2018-05-22T00:16:48-07:00',
amount: '420.64'
},
{
id: '61CBD2A7-C3C7-87C7-8072-C1E86220A07A',
name: 'Darryl Rosario',
description: 'vitae, sodales at, velit. Pellentesque ultricies dignissim lacus. Aliquam rutrum',
date: '2018-06-24T20:25:09-07:00',
amount: '44.99'
}
]
describe('Datatable.vue', () => {
it('Checks if datatable is rendered properly', () => {
const wrapper = shallowMount(Datatable, {
propsData: {
items
}
})
// clicks the amount table th header
wrapper.find('table').find('thead > tr > th:last-child').trigger('click')
// I also did this (logs 'test' twice)
wrapper.vm.sortItems('amount')
console.log(wrapper.vm._prop.items[0].amount) //still 420.64
...
})
被交换/排序（已在一个实际的浏览器，导致对象的数量为44.99在第一行），但是当我访问items[0]时，包装器似乎没有反映出这一变化。它确实在终端控制台上记录了 test 。这样的操作后，我需要重新调用/刷新包装器吗？还是有更好的方法来测试 vue-test-utils / mocha-webpack 上的点击功能？