Vuetify v-data-table with vuex. Not rendering in unit test

Question

vue 2.5.2 vuex 3.0.1 vuetify 1.0.16

I'm creating vuex+vuetify application.

Rendering data is in the vuex store. It uses v-data-table with pagination.

The component code is

<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>

And I added test code. First one is 'adds a new shop' test , that add store. The test passed.

And next test 'uses same store' is rendering with same store instance. But test not passed. When removing pagination setting from component, then test passed. Why not rendering when pagination setting existing.

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('adds a new shop', async () => {
    // build component
    const wrapper = mount(DataTable, {store})
    const inputShopName = wrapper.find('input#shopName')[0]
    inputShopName.trigger('focus')
    inputShopName.element.value = 'AEON'
    inputShopName.trigger('input')
    await wrapper.vm.$nextTick()
    wrapper.find('button#save')[0].trigger('click')
    await wrapper.vm.$nextTick()
    expect(wrapper.html()).toContain('AEON')
  })
  it('uses same store', () => {
    // build component
    const wrapper2 = mount(DataTable, {store})
    expect(wrapper2.html()).toContain('AEON')
  })
})

Reproduction code in https://github.com/dokechin/vue-test-example

'uses same store' test rendered contents in pagination. <div class=\"datatable__actions__pagination\">NaN-NaN of 1</div> — user2850652
github.com/vuetifyjs/vuetify/issues/632 and codepen.io/anon/pen/GmbwZa I solved my problem with my self. — user2850652

user2850652 user2850652 · Accepted Answer · 2018-04-25T22:39:53

I tried changed my problem more simple. Making store data before mounting, not rendering when pagination.sync exists.

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')
  })
})

Vuetify v-data-table with vuex. Not rendering in unit test

1 Answers