Patterns for testing Vue 3 & Pinia with <script setup>

[nathan-kerr]

I expect this following test to pass, however:
AssertionError
expected 'inbox' to equal 'next'

Navigation.cy.js:

import { createTestingPinia } from "@pinia/testing";
import { useNavStore } from "@/stores/navigation";
import Navigation from ".@/components/Navigation.vue";

describe("<Navigation />", () => {
  let store;

  beforeEach(() => {
    Cypress.config("defaultCommandTimeout", 500);

    const spy = cy.spy();
    createTestingPinia({
      createSpy: () => spy,
    });

    // one way:
    store = useNavStore();

    // another way with the same error:
    store = useNavStore(createTestingPinia({
        createSpy: () => spy,
    }));

    cy.mount(Navigation, {
      global: {
        plugins: [store],
      },
    });
  });

  it("updates the navStore when the Next link is clicked", () => {
    // PASSING TEST
    expect(store.noteType).to.equal("inbox");

    cy.contains("Next").click()

    // store.setNoteType("next"); * this does not make the test pass
    // store.noteType = "next"     ** this does make the test pass

    // ASSERTION ERROR
    // expected 'inbox' to equal 'next'
    expect(store.noteType).to.equal("next");
  });
});

Here is the component under test

Navigation.vue:

<template>
    <nav>
      <ul>
        <li @click="navStore.setNoteType('inbox')">Inbox</li>
        <li @click="navStore.setNoteType('next')">Next</li>
      </ul>
    </nav>
</template>

<script setup>
import { useNavStore } from '@/stores/navigation';
const navStore = useNavStore();
</script>

and the store

navigation.js:

import { defineStore } from "pinia";

export const useNavStore = defineStore("navigation", {
  state: () => ({
    noteType: 'inbox',
  }),
  actions: {
    setNoteType(type) {
      this.noteType = type;
    },
  },
});

I've manually tested this code and it works as expected, so my failing test is not set up properly.

Please show me the proper pattern to test this.

[lmiller1990]

I wrote a small article about this: https://cypress-testing-handbook.netlify.app/pinia.html

I have not using the "testingPinia" - I just use a real store and create a fresh one for each test. Take a look at that -- let me know what you think?

[nathan-kerr]

That did the trick, thank you very much! I wish this resource had turned up in my searches.

The only issue I see is the lack of a spy, which comes with the createTestingPinia().

[lmiller1990]

Do you need spy? I like to assert against outputs (eg, what changed) not what was called, or with what args -- that feels like an implementation detail to me. Happy to discuss / bounce ideas if you've got a specific example.

[nathan-kerr]

Good question. Certainly not for this functionality, but perhaps it is useful in certain cases and the spy display in Cypress can make spies a nice debugging tool.

[whitespacecode]

We use the beforeEach and cy.window to get access to the store.
Example:

beforeEach(function () {
      cy.window()
          .its('store.navigationStore')
          .as('getNavigationStore')
  })

You then have access to the store, getters and setters inside a test

it('navigation test', function () {
  cy.wait(150) //wait for data to load
  const navigationStore = this.getNavigationStore
}

[nathan-kerr]

Very cool, thank you!

[jordanpowell88]

Closing this as it appears that the answer was provided by @lmiller1990