FlatPickr component does not render correctly in vitest tests

[hamzaazhar-sendoso]

I'm submitting a ... (check one with "x")

[x] Bug report => search github for a similar issue or PR before submitting
[ ] Feature request
[ ] Other, please describe

Tell about your platform

• flatPickr version : 4.6.13
• Vue.js version : 3.4.25
• Browser name and version : Chrome
• This package version : 11.0.5

Current behavior

When try to test the component with date fields, I am getting this error: Cannot read properties of undefined (reading 'calendarContainer') Also in the console I am seeing this warning:

[Vue warn]: Component is missing template or render function. 
  at <Anonymous id="auZ_9XPj2BmYMwgVsPrhS" ref_key="flatPicker" ref=Ref< undefined >  ... > 
  at <DateInput key=0 id="auZ_9XPj2BmYMwgVsPrhS" name="fromDate"  ... > 
  at <InputField modelValue="" onUpdate:modelValue=fn name="fromDate"  ... > 
  at <Test ref="VTU_COMPONENT" > 
  at <VTUROOT>

I believe it's maybe due to this warning

Expected behavior

Tests should pass as expected

Minimal reproduction of the problem with instructions I tried with the sample vue component:

// Test.vue
<template>
  <InputField
    v-model="fromDate"
    name="fromDate"
    type="date"
    labelText="dateFrom"
    size="small"
    :multiple="false"
    shortFormat
  />
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { InputField } from '@sendoso/vue-input-field'

  const fromDate = ref('')
</script>

// Test.spec.ts
import Test from './Test.vue'
import { i18n } from '../../test-utils/global'
import { render } from '@testing-library/vue'
import { vi } from 'vitest'

vi.mock('#app', () => ({
  useRouter: () => ({
    query: {},
  }),
  useRoute: () => ({
    query: {},
  }),
}))

describe('Filters Field Set', () => {
  it('displays the filters', () => {
    render(Test, {
      global: {
        plugins: [i18n],
      },
    })
  })
})

When I run the test, it ends up saying: Cannot read properties of undefined (reading 'calendarContainer')

[hamzaazhar-sendoso]

I am calling FlatPickr as follows:

<FlatPickr
    :id="id"
    ref="flatPicker"
    v-model="inputValue"
    :name="name"
    type="date"
    :class="classes.input"
    :aria-label="labelText"
    :placeholder="placeholder"
    :aria-describedby="ariaDescribedBy"
    :aria-errormessage="ariaErrorMessage"
    :disabled="disabled"
    :config="config"
    @update:modelValue="onInput"
    @blur="onBlur"
  />

[ankurk91]

please try version 12