Algolia component testing - VueInstantSearch

[BernardoSemiOficial]

hello, I'm working with the search algorithm with widgets for Vue.
https://www.algolia.com/doc/guides/building-search-ui/getting-started/vue/

I'm having difficulty performing tests on these components, because when assembling them in the tests, they look like this '' and that way I can't make assertions.

Stats.vue needs a parent component called to be around for the child components to work. Because it is in it that access keys are passed to be able to fetch the data. So in the tests I needed to mount the parent around.

Stats.vue

<template>
  <ais-stats>
    <template v-slot="{ nbHits, query }">
      <p data-testid="stats-query" v-if="query">{{ query }}</p>
      <p v-if="nbHits" data-testid="stats-number-hits">
        {{ nbHits }} {{ nbHits > 1 ? 'itens' : 'item' }} em exibição
      </p>
    </template>
  </ais-stats>
</template>

<script lang="ts">
import { defineComponent } from '@marketplace/shared/utils'
export default defineComponent({
  name: 'Stats',
})
</script>

const searchClient = algoliasearch(
  'B1G2GM9NG0',
  'aadef574be1f9252bb48d4ea09b5cfe5'
)

const ParentAisInstantSearch = {
  template: `
    <ais-instant-search :index-name="indexName" :search-client="searchClient">
    </ais-instant-search>`,
  components: {
    AisInstantSearch,
  },
  data() {
    return {
      searchClient,
      indexName: 'demo_ecommerce',
    }
  },
}

describe('Stats.vue', () => {
  let wrapper: Wrapper<Vue & Stats>

  beforeEach(() => {
    wrapper = shallowMount(Stats, {
      localVue,
      parentComponent: ParentAisInstantSearch,
    })
  })

  it('Should render component', () => {
    // wrapper.html()
    `
    <ais-stats-stub>
      <!---->
      <!---->
    </ais-stats-stub>
    `
  })
})