Jest: Quasar table is not rendering rows

Question

I'm using Jest for testing a quasar table in VueJs 3. The table I have is like this:

<template>
  <q-table id="myTable"
           :rows="rows"
           :columns="columns"
           virtual-scroll
           :rows-per-page-options="[0]"
           hide-bottom
  />
</template>
<script lang="ts">
import {defineComponent, PropType} from 'vue'

export default defineComponent({
  name: 'TableDemo',
  props: {
    rows: {
      type: [] as PropType<[{ name: string, surname: string }]>,
      default: []
    },
  },
  setup() {
    const columns = [
      {
        name: 'name',
        required: true,
        align: 'left',
        label: 'name',
        field: 'name',
        sortable: true
      },
      {
        name: 'surname',
        label: 'surname',
        align: 'left',
        field: 'surname',
        sortable: true
      },
    ]

    return {columns}
  }
})
</script>

I'm trying to write a very simple test to understand how this works:

it('Should contain the word "John"', async () => {
    )
     const wrapper = mount(TableDemo, {
             props: {rows: [{name: 'John', surname: 'Marston'}]},
         }
     )

  expect(wrapper.find('#myTable').text()).toContain('John')
})

My problem is that it doesn't render the rows, but only the columns. Here what Jest renders:

  <div class="q-table__container q-table--horizontal-separator column no-wrap q-table__card q-table--no-wrap"
   id="myTable"><!---->
<div class="q-table__middle q-virtual-scroll q-virtual-scroll--vertical scroll">
  <table class="q-table">
    <thead>
    <tr>
      <th class="text-left sortable">name<i aria-hidden="true"
                                            class="notranslate material-icons q-icon q-table__sort-icon q-table__sort-icon--left"
                                            role="presentation">arrow_upward</i></th>
      <th class="text-left sortable">surname<i aria-hidden="true"
                                               class="notranslate material-icons q-icon q-table__sort-icon q-table__sort-icon--left"
                                               role="presentation">arrow_upward</i></th>
    </tr>
    </thead>
    <tbody class="q-virtual-scroll__padding">
    <tr>
      <td colspan="2" style="height: 0px; --q-virtual-scroll-item-height: 48px;"/>
    </tr>
    </tbody>
    <tbody class="q-virtual-scroll__content" id="qvs_1" tabindex="-1"/>
    <tbody class="q-virtual-scroll__padding">
    <tr>
      <td colspan="2" style="height: 48px; --q-virtual-scroll-item-height: 48px;"/>
    </tr>
    </tbody>
  </table>
</div><!----></div>

Where is my mistake? Why doesn't the table render the row?

UPDATE I actually realized that it works without "virtual-scroll" option, so the problem is bound to that. Does anyone have experience with it?

Answer 1

It seems they have used some timer function inside virtual scroll implementation, this is my fix:

call jest.useFakeTimers(); method before describe block, then inside test call jest.runAllTimers(); and await wrapper.vm.$nextTick(); before assertion

it('renders correctly', async () => {
    const wrapper: any = wrapperFactory();

    jest.runAllTimers();
    await wrapper.vm.$nextTick();

    expect(wrapper.html()).toMatchSnapshot();
  });