Vue.js 使用vuex Vuetify v-data-table。不在单元测试中呈现

Vue.js 使用vuex Vuetify v-data-table。不在单元测试中呈现,vue.js,pagination,vuejs2,vuex,vuetify.js,Vue.js,Pagination,Vuejs2,Vuex,Vuetify.js,vue 2.5.2 vuex 3.0.1 vuetify 1.0.16 我正在创建vuex+vuetify应用程序 渲染数据位于vuex存储区中。 它使用带分页的v-data-table 组件代码为 <template> <v-container> <v-text-field id="shopName" v-model="editedItem.name" required></v-text-field> <v-btn id

vue 2.5.2 vuex 3.0.1 vuetify 1.0.16

我正在创建vuex+vuetify应用程序

渲染数据位于vuex存储区中。 它使用带分页的v-data-table

组件代码为

<template>
  <v-container>
    <v-text-field id="shopName" v-model="editedItem.name" required></v-text-field>
    <v-btn id="save" color="blue darken-1" flat @click.native="save">save</v-btn>
    <v-data-table :headers="headers" :pagination.sync="pagination" :items="shops" class="elevation-1">
      <template slot="items" slot-scope="props">
          <td>{{ props.item.name }}</td>
      </template>
      <template slot="no-data">
          <td>no item</td>
      </template>
    </v-data-table>
  </v-container>
</template>

<script>
export default {
  name: 'shop',
  created () {
  },
  data () {
    return {
      pagination: {
        sortBy: 'name'
      },
      headers: [
        {
          text: 'name',
          align: 'left',
          value: 'name'
        }
      ],
      editedItem: {name: ''},
      defaultItem: {name: ''}
    }
  },
  methods: {
    close () {
      setTimeout(() => {
        this.editedItem = Object.assign({}, this.defaultItem)
      }, 300)
    },
    save () {
      this.$store.commit('addShop', this.editedItem)
      this.close()
    }
  },
  computed: {
    shops () {
      return this.$store.state.items
    }
  },
  mounted () {
  }
}
</script>
中的复制代码

我试着把我的问题变得更简单。 装载前生成存储数据,存在pagination.sync时不呈现

import { mount } from 'avoriaz'
import Vue from 'vue'
import Vuetify from 'vuetify'
import DataTable from '@/components/DataTable'
import { store } from '../../../src/store/store.js'

Vue.use(Vuetify)

describe('Shop.vue', () => {
  it('uses store', () => {
    // build component
    store.state.items.push({name: 'AEON'})
    const wrapper2 = mount(DataTable, {store})
    expect(wrapper2.html()).toContain('AEON')
  })
})

“使用同一存储”在分页中测试呈现的内容。我和1的NaN NaN解决了我自己的问题。哦,还没有解决,我输入了错误的代码。对不起。我将等待pull 3857的发布。
import { mount } from 'avoriaz'
import Vue from 'vue'
import Vuetify from 'vuetify'
import DataTable from '@/components/DataTable'
import { store } from '../../../src/store/store.js'

Vue.use(Vuetify)

describe('Shop.vue', () => {
  it('uses store', () => {
    // build component
    store.state.items.push({name: 'AEON'})
    const wrapper2 = mount(DataTable, {store})
    expect(wrapper2.html()).toContain('AEON')
  })
})