Trouble switching tests from vuex to pinia

[fancyfootwork]

I have converted my app from vuex to pinia and now I'm rewriting my tests. I've tried several things, but I keep getting errors when trying to use a mock store. Here are the original tests that work:

import RegisterUserSuccess from '@/views/RegisterUserSuccess.vue';
import router from '@/router';
import store from '@/store';
import { createStore } from 'vuex';
import { mount } from '@vue/test-utils';

function factory(config = {}) {
  config.mountOptions = config.mountOptions || {};
  config.plugins = config.plugins || {};
  return mount(RegisterUserSuccess, {
    global: {
      plugins: config.plugins,
    },
    ...config.mountOptions,
  });
}

const store2 = createStore({
  state() {
    return {
      Authentication: {
        user: {},
      },
    };
  },
  mutations: {
    SET_CURRENT_USER(state) {
      state.Authentication.user = {
        firstName: 'Joseph',
        email: 'test@email.com',
      };
    },
    SET_EMAIL_RESENT_FLAG(state) {
      state.Authentication.emailResent = true;
    },
  },
  actions: {
    fetchLocalUser() {
      this.commit('SET_CURRENT_USER');
    },
    resendVerificationEmail() {
      this.commit('SET_EMAIL_RESENT_FLAG');
    },
  },
});

let wrapper;

describe('RegisterUserSuccess', () => {
  beforeEach(() => {
    wrapper = factory({ plugins: [store, router] });
  });

  it('should render the component', () => {
    expect(wrapper.exists()).toBeTruthy();
  });

  describe('page title', () => {
    it('is rendered with the correct text', () => {
      const title = wrapper.get('[data-testid=register-success-title]');
      expect(title.exists()).toBeTruthy();
      expect(title.text()).toBe('Next Step: Verify Email');
    });
  });

  describe('page content', () => {
    it('is rendered with user first name when available', () => {
      wrapper = factory({ plugins: [store2, router] });

      const pageContent = wrapper.get('[data-testid=register-success-page]');
      expect(pageContent.exists()).toBeTruthy();
      expect(pageContent.html()).toContain('Thanks for registering Joseph');
    });

    it('is rendered with user email when available', () => {
      wrapper = factory({ plugins: [store2, router] });

      const pageContent = wrapper.get('[data-testid=register-success-page]');
      expect(pageContent.html()).toContain(
        'We just sent an email to test@email.com'
      );
    });

    it('is rendered with general message when email not available', () => {
      const pageContent = wrapper.get('[data-testid=register-success-page]');
      expect(pageContent.html()).toContain('We just sent you an email.');
    });

    it('does not show resend email when no email address is present', () => {
      expect(wrapper.html()).not.toContain('resend verification email');
    });

    it('is rendered with email sent message when clicks resend verification email', async () => {
      wrapper = factory({ plugins: [store2, router] });
      const resendEmailContent = wrapper.get('.big-spacer');
      const resendLink = wrapper.get('[data-testid=resend-email-link]');
      await resendLink.trigger('click');
      expect(resendEmailContent.html()).toContain('...(email resent)');
    });
  });
});

Here are the pinia tests where the mocked store tests don't work:

import RegisterUserSuccess from '@/views/RegisterUserSuccess.vue';
import router from '@/router';
import { createTestingPinia } from '@pinia/testing';
import { defineStore } from 'pinia';
import { mount } from '@vue/test-utils';

function factory(config = {}) {
  config.mountOptions = config.mountOptions || {};
  config.plugins = config.plugins || {};
  return mount(RegisterUserSuccess, {
    global: {
      plugins: config.plugins,
    },
    ...config.mountOptions,
  });
}

const useStore2 = defineStore('AuthenticationStore', {
  state: () => ({
    user: {},
  }),
  actions: {
    fetchLocalUser() {
      this.user = {
        firstName: 'Joseph',
        email: 'test@email.com',
      };
    },
    resendVerificationEmail() {
      this.emailResent = true;
    },
  },
});

const store2 = createTestingPinia();

store2.state.value.AuthenticationStore = useStore2();

const testAuthenticationStore = {
  user: {
    firstName: 'Joseph',
    email: 'test@email.com',
  },
  emailResent: true,
};

let wrapper;

describe('RegisterUserSuccess', () => {
  beforeEach(() => {
    wrapper = factory({ plugins: [createTestingPinia(), router] });
  });

  it('should render the component', () => {
    expect(wrapper.exists()).toBeTruthy();
  });

  describe('page title', () => {
    it('is rendered with the correct text', () => {
      const title = wrapper.get('[data-testid=register-success-title]');
      expect(title.exists()).toBeTruthy();
      expect(title.text()).toBe('Next Step: Verify Email');
    });
  });

  describe('page content', () => {
    it('is rendered with user first name when available', () => {
      wrapper = factory({
        plugins: [store2, router],
      });

      const successMessage = wrapper.get(
        '[data-testid=register-success-message]'
      );
      expect(successMessage.exists()).toBeTruthy();
      expect(successMessage.text()).toContain('Thanks for registering Joseph');
    });

    it('is rendered with user email when available', () => {
      wrapper = factory({
        plugins: [store2, router],
      });

      const pageContent = wrapper.get(
        '[data-testid=register-success-message]+p'
      );
      expect(pageContent.text()).toContain(
        'We just sent an email to test@email.com'
      );
    });

    it('is rendered with general message when email not available', () => {
      const pageContent = wrapper.get('[data-testid=register-success-page]');
      expect(pageContent.html()).toContain('We just sent you an email.');
    });

    it('does not show resend email when no email address is present', () => {
      expect(wrapper.html()).not.toContain('resend verification email');
    });

    it('is rendered with email sent message when clicks resend verification email', async () => {
      wrapper = factory({
        plugins: [
          createTestingPinia({
            stubActions: false,
            initialState: { AuthenticationStore: testAuthenticationStore },
          }),
          router,
        ],
      });
      const resendEmailContent = wrapper.get('.big-spacer');
      const resendLink = wrapper.get('[data-testid=resend-email-link]');
      await resendLink.trigger('click');
      expect(resendEmailContent.html()).toContain('...(email resent)');
    });
  });
});

Here are the results:

FAIL tests/unit/RegisterUserSuccess.spec.js
● RegisterUserSuccess › page content › is rendered with user first name when available

expect(received).toContain(expected) // indexOf

Expected substring: "Thanks for registering Joseph"
Received string:    "Thanks for registering"

  74 |       );
  75 |       expect(successMessage.exists()).toBeTruthy();
> 76 |       expect(successMessage.text()).toContain('Thanks for registering Joseph');
     |                                     ^
  77 |     });
  78 |
  79 |     it('is rendered with user email when available', () => {

  at Object.<anonymous> (tests/unit/RegisterUserSuccess.spec.js:76:37)

● RegisterUserSuccess › page content › is rendered with user email when available

expect(received).toContain(expected) // indexOf

Expected substring: "We just sent an email to test@email.com"
Received string:    "We just sent you an email. Click the link in your email to verify your account."

  85 |         '[data-testid=register-success-message]+p'
  86 |       );
> 87 |       expect(pageContent.text()).toContain(
     |                                  ^
  88 |         'We just sent an email to test@email.com'
  89 |       );
  90 |     });

  at Object.<anonymous> (tests/unit/RegisterUserSuccess.spec.js:87:34)

...It seems as though the mock authentication store isn't being used.

I think this specific part is not correct:

const store2 = createTestingPinia();

store2.state.value.AuthenticationStore = useStore2();

I got that code from here: #101 (comment)
but I guess I'm implementing it wrong?

I also tried adding the store with a lowercase a (as it is defined in the component):

const store2 = createTestingPinia();

store2.state.value.authenticationStore = useStore2();

Still no dice.
If anyone could tell me what I'm doing wrong I would greatly appreciate it!