Mocking a Pinia store - help needed

[CRBroughton]

Hi there all.

I've been playing around with Vitest and Pinia, however I've ran into a bit of a brick wall with testing a Pinia store. I've got the below test that simply has a boolean, and a function that set the boolean to true, however the test fails. Looking through the console.log's, I can see the value changing in the store, but the test doesn't reflect that. I'm guessing it's either the implementation of the mock itself (something admittedly I don't know much about), or how the store is being used in the tests.

One thing I tried was deleting the bottom test and that passes, which suggests it's not the tests, or something is 'leaking' through the previous test into the following tests.

Any help is greatly appreciated :)

Repository with the issue: https://github.com/CRBroughton/pinia-test-issue

Test:

import { mount } from "@vue/test-utils";
import { createTestingPinia } from "@pinia/testing";
import { authStore } from "../../stores/main";
import NavBar from "../../components/NavBar.vue";
import { describe, it, vi, afterEach, expect } from "vitest";

vi.mock("../../stores/main", () => ({
  authStore() {
    return {
      loggedIn: false,

      logInUser(value: boolean) {
        // eslint-disable-next-line no-console
        console.log("you passed:", value, "current value:", this.loggedIn);
        this.loggedIn = value;
        console.log("new value", this.loggedIn);
      },
    };
  },
}));

const bootstrap = () => {
  return mount(NavBar, {
    global: {
      plugins: [createTestingPinia({ createSpy: vi.fn })],
    },
  });
};

afterEach(() => {
  vi.clearAllMocks();
});

const store = authStore();

describe("NavBar Component", () => {
  it("renders the register and login links when logged out", () => {
    store.logInUser(false);

    const wrapper = bootstrap();

    const loginLink = wrapper.get("[data-test=login]");
    expect(loginLink.text()).toContain("Login");

    const registerLink = wrapper.get("[data-test=register]");
    expect(registerLink.text()).toContain("Register");
  });
  it("renders the profile, create post and logout links when logged in", () => {
    store.logInUser(true);
    const wrapper = bootstrap();

    const profileLink = wrapper.get("[data-test=profile]");
    expect(profileLink.text()).toContain("Profile");

    const createLink = wrapper.get("[data-test=create]");
    expect(createLink.text()).toContain("Create Post");

    const logoutLink = wrapper.get("[data-test=logout]");
    expect(logoutLink.text()).toContain("Logout");
  });
});

Store file:

import { defineStore } from "pinia";
import { reactive } from "vue";

export const authStore = defineStore("main", {
  state: () => {
    return {
      loggedIn: false,
      userId: "",
      credentials: reactive({
        name: "",
        email: "",
        password: "",
      }),
      createPost: reactive({
        url: "",
        topic: "",
        description: "",
      }),
    };
  },
  actions: {
    logInUser(value: boolean) {
      this.loggedIn = value;
    },
  },
});