How to test part of a component/child components which is displayed based on a computed Property ?

[roshmani]

i have a component which i am trying to test

export default {
    name: "Search",
    components: {
      Pagination,
      SearchHeader,
      SearchListItem,
    },
    data() {
      return {
        ...
      };
    },
    computed: {
      ...mapStores(useMyStore),
      searchResults() {
        const results = this.myStore.defaultSearchResults;

        results.sort((a, b) => {
          const aName = a.name ? a.name : a.title,
            bName = b.name ? b.name : b.title;

          return aName.localeCompare(bName);
        });

        return results;
      },
	  resultCounter(){
	   return this.searchResults?.length;
	  }
      ....
    },
    
    methods: {
     
    },
  };
</script>

<template>
  <section class="search">
    <div class="container">
      <SearchHeader
         @perform-search="performSearch"
      />

      <div class="search-results col-lg-10">
        <p class="mb-3">{{ resultCounter }} Ergebnisse</p>

        <ul class="dps-list dps-list--bordered">
          <SearchListItem
            v-for="(result, index) in pagedSearchedResults"
            :key="'search-result-' + index"
            ....
          />
        </ul>

        <p v-if="!searchResults.length">
          No results found
        </p>
      </div>
      <div class="row mt-5">
        <div class="col-12">
          <Pagination
            v-if="searchResults.length > 0"
            ...
          />
        </div>
      </div>
    </div>
  </section>
</template>

In the snapshot test it does not display the list and pagination component. How to access those components which gets displayed based on computed properties. I trie the following :

const piniaInstance = createTestingPinia({
  initialState: {
    myStore: {
      searchResults: mockSearchResults,
    },
  },
  stubActions: false,
  createSpy: vi.fn(),
  fakeApp: true,
});

const getWrapper = () => {
  return mount(Search, {
    shallow: true,
    data() {
      return {
        ...
      };
    },
    global: {
      plugins: [piniaInstance, router],
      stubs: {
        Pagination: true,
      },
    },
  });
};

describe("Search", () => {
  let wrapper;


  beforeEach(() => {
    setActivePinia(piniaInstance);
    wrapper = getWrapper();
  });

  test("builds", () => {
    expect(wrapper).toBeTruthy();
  });

  test("matches snapshot", () => {
    expect(wrapper.element).toMatchSnapshot();
  });
});

How can i set the computed properties so that other components are visible ?

TIA