Nuxt•7d ago

"async-component-wrapper-stub" testing

Hello. A part of my component is:

 <div
      v-if="showSuggestions"
      class="absolute -inset-x-8 -top-8 min-h-64 bg-white px-4 pb-8 pt-24 shadow-lg"
      :class="classSuggestsWrapper"
    >
      <LazySearchQuickSuggests
        :tips="searchResult?.tips ?? []"
        :intro="introStatus"
        :products="searchResult?.products ?? []"
        :categories="searchResult?.categories ?? []"
        :suggests="searchResult?.suggests ?? []"
        :brands="searchResult?.brands ?? []"
        @select-tip="selectTip($event)"
      />
      <LazyAppLoading v-if="isLoadingSuggests" />
    </div>

 <div
      v-if="showSuggestions"
      class="absolute -inset-x-8 -top-8 min-h-64 bg-white px-4 pb-8 pt-24 shadow-lg"
      :class="classSuggestsWrapper"
    >
      <LazySearchQuickSuggests
        :tips="searchResult?.tips ?? []"
        :intro="introStatus"
        :products="searchResult?.products ?? []"
        :categories="searchResult?.categories ?? []"
        :suggests="searchResult?.suggests ?? []"
        :brands="searchResult?.brands ?? []"
        @select-tip="selectTip($event)"
      />
      <LazyAppLoading v-if="isLoadingSuggests" />
    </div>

And a part of my test:

    it('Клик по полю ввода вызывает handleInputFocus', async () => {
        const wrapper = shallowMount(SearchQuick);
        const input = wrapper.find(SearchQuick__input);
        let SearchQuickSuggestsComponent = wrapper.findComponent(SearchQuickSuggestsSuggests);
        expect(SearchQuickSuggestsComponent.exists()).toBe(false);
        await input.trigger('focus');
        await flushPromises();
        console.log(wrapper.html());
        SearchQuickSuggestsComponent = wrapper.findComponent(SearchQuickSuggestsSuggests);
        expect(SearchQuickSuggestsComponent.exists()).toBe(true);
    });

    it('Клик по полю ввода вызывает handleInputFocus', async () => {
        const wrapper = shallowMount(SearchQuick);
        const input = wrapper.find(SearchQuick__input);
        let SearchQuickSuggestsComponent = wrapper.findComponent(SearchQuickSuggestsSuggests);
        expect(SearchQuickSuggestsComponent.exists()).toBe(false);
        await input.trigger('focus');
        await flushPromises();
        console.log(wrapper.html());
        SearchQuickSuggestsComponent = wrapper.findComponent(SearchQuickSuggestsSuggests);
        expect(SearchQuickSuggestsComponent.exists()).toBe(true);
    });

console.log show

<async-component-wrapper-stub tips="Tip 1,Tip 2" intro="true" products="" categories="" suggests="" brands=""></async-component-wrapper-stub>

<async-component-wrapper-stub tips="Tip 1,Tip 2" intro="true" products="" categories="" suggests="" brands=""></async-component-wrapper-stub>

But test is not success:

expect(SearchQuickSuggestsComponent.exists()).toBe(true);

expect(SearchQuickSuggestsComponent.exists()).toBe(true);

How can I improve the test to get it to pass?

3 Replies

kapa.ai•7d ago

Hi @Yuri. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To improve your test and make it pass, you need to consider a few things about testing async components in Vue and Nuxt. Let's break down the problem and provide a solution based on the knowledge sources: 1. The LazySearchQuickSuggests component is an async component, which is why it's being rendered as an <async-component-wrapper-stub> in your shallow mount test. 2. When testing async components, you need to use mountSuspended instead of shallowMount to properly handle the async nature of the component. Here's how you can improve your test: 1. Use mountSuspended from @nuxt/test-utils/runtime:

import { mountSuspended } from '@nuxt/test-utils/runtime'

// ... other imports

it('Клик по полю ввода вызывает handleInputFocus', async () => {
    const wrapper = await mountSuspended(SearchQuick);
    const input = wrapper.find(SearchQuick__input);
    let SearchQuickSuggestsComponent = wrapper.findComponent({ name: 'LazySearchQuickSuggests' });
    expect(SearchQuickSuggestsComponent.exists()).toBe(false);
    await input.trigger('focus');
    await wrapper.vm.$nextTick();
    SearchQuickSuggestsComponent = wrapper.findComponent({ name: 'LazySearchQuickSuggests' });
    expect(SearchQuickSuggestsComponent.exists()).toBe(true);
});

import { mountSuspended } from '@nuxt/test-utils/runtime'

// ... other imports

it('Клик по полю ввода вызывает handleInputFocus', async () => {
    const wrapper = await mountSuspended(SearchQuick);
    const input = wrapper.find(SearchQuick__input);
    let SearchQuickSuggestsComponent = wrapper.findComponent({ name: 'LazySearchQuickSuggests' });
    expect(SearchQuickSuggestsComponent.exists()).toBe(false);
    await input.trigger('focus');
    await wrapper.vm.$nextTick();
    SearchQuickSuggestsComponent = wrapper.findComponent({ name: 'LazySearchQuickSuggests' });
    expect(SearchQuickSuggestsComponent.exists()).toBe(true);
});

2. If you still encounter issues, you might need to mock the LazySearchQuickSuggests component using mockComponent:

import { mockComponent } from '@nuxt/test-utils/runtime'

mockComponent('LazySearchQuickSuggests', {
  props: {
    tips: Array,
    intro: Boolean,
    products: Array,
    categories: Array,
    suggests: Array,
    brands: Array
  },
  template: '<div>Mocked LazySearchQuickSuggests</div>'
})

// ... your test code

import { mockComponent } from '@nuxt/test-utils/runtime'

mockComponent('LazySearchQuickSuggests', {
  props: {
    tips: Array,
    intro: Boolean,
    products: Array,
    categories: Array,
    suggests: Array,
    brands: Array
  },
  template: '<div>Mocked LazySearchQuickSuggests</div>'
})

// ... your test code

3. Make sure you have the correct Vitest configuration in your vitest.config.ts:

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    environment: 'nuxt',
  }
})

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    environment: 'nuxt',
  }
})

These changes should help your test pass by properly handling the async component and the Nuxt environment. Sources: Docs > Getting-started > Testing > Unit Testing > 🛠️ Helpers > mountSuspended (https://nuxt.com/docs/getting-started/testing#mountsuspended) Docs > Getting-started > Testing > Unit Testing > 🛠️ Helpers > mockComponent (https://nuxt.com/docs/getting-started/testing#mockcomponent) Docs > Getting-started > Testing > Unit Testing > Setup (https://nuxt.com/docs/getting-started/testing#setup) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7d ago

<@740173469404364872> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

YuriOP•7d ago

Ups... It was the mistake in the name of the imported component. This is correct: SearchQuickSuggestsComponent = wrapper.findComponent(SearchQuickSuggests); Test is pass.

Gaming

Programming

"async-component-wrapper-stub" testing