title: Unit Testing Vue 3 Component that uses Pinia with Vue Testing Library
body: <p>I am struggling to understand how I can test the rendering of items based on the results of a call to a Pina getter in my Vue 3 app (using the Vue Testing Library). An example of what I want to achieve might be something like:</p>
  <pre><code>&lt;div v-for=&quot;contact in store.getContacts()&quot;&gt;
        &lt;p&gt;{{contact.firstName}} {{ contact.lastName }}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  <p>where I want to test that all the names of the contacts are displayed.</p>
  <p>My app uses Vitest and @testing-library/vue so in my test spec for the above test I might have:</p>
  <pre><code>import { cleanup, getByRole, render, screen } from &quot;@testing-library/vue&quot;;
  import { describe, it, vi, beforeEach, afterEach } from &quot;vitest&quot;;
  import MyComponent from &quot;@/components/MyComponent.vue&quot;;
  import { createTestingPinia } from &quot;@pinia/testing&quot;;
  
  describe(&quot;MyComponent.vue&quot;, () =&gt; {
  
    let getByText: any, getByRole: any;
  
    beforeEach(() =&gt; {
      ({ getByText } = render(MyComponent, {
        global: {
          plugins: [
            createTestingPinia({
              initialState: {
                contacts: [{firstName:&quot;Bill&quot;,lastName:&quot;Jones&quot;},{firstName:&quot;Peter&quot;,lastName:&quot;Smith&quot;}],
              },
              stubActions: false,
              createSpy: vi.fn,
            }),
          ],
        },
      }));
    });
  
    afterEach(() =&gt; {
      cleanup();
    });
    
    it(&quot;should display the first name&quot;, () =&gt; {
      getByText(&quot;Bill Jones&quot;);
    });
  
  }); 
  </code></pre>
  <p>in the store I have the following state setup:</p>
  <pre><code>interface Student {
    &quot;id&quot;: number;
    &quot;firstName&quot;: string;
    &quot;lastName&quot;: string;
    &quot;house&quot;: string;
    &quot;year&quot;: number;
    &quot;class&quot;: string;
  }
  
  interface ContactState {
    contacts: Student[];
  }
  
  export const useContactStore = defineStore({
    id: &quot;contact&quot;,
    state: ():ContactState =&gt; ({
      contacts: [],
  }),
  </code></pre>
  <p>and a getter:</p>
  <pre><code>getContacts: (state) =&gt; {
        return state.contacts;
  }
  </code></pre>
  <p>I think I have setup the initial state of the store correctly (??) but the getter does not seem to be working - what else do I need to do here? Do I have to mock the getter or something? Or maybe I am not initialising the store correctly in the test?</p>
  <p>(my app is all working fine, it's the test I cannot get to work)</p>