How to access mock store value in the Vue component when doing jest unit testing?

[LaurenceHo]

I encountered unexpected issue when doing jest unit test.
In my unit test file, I have a test like this:

// UserInfo.spec.ts

it('Check user info', async () => {
    const wrapper = mount(FeedbackDialog, {
      global: {
        plugins: [createTestingPinia()],
      },
    });
    const store = userStore();
    store.userAuthenticated = true;
    store.userInfo = {
      userId: 'aaaa1234',
      username: 'aaaa1234',
      initials: 'AA',
      email: 'test@test.com',
      completeUserOnboard: true
    };
    console.log(store.userInfo); // It prints user info object correctly
    
    await wrapper.vm.$nextTick();
    expect(wrapper).toBeTruthy();
    expect(wrapper.vm.userinfoUrl).toContain('user_id=aaaa1234');
});

In my Vue SFC file, I have something like this:

// UserInfo.vue

<script lang="ts" setup>
import { UserInfo } from 'src/models/models';
import { userStore } from 'src/pinia/user-store';
import { computed} from 'vue';

const piniaUserStore = userStore();
const userInfo = computed(() => piniaUserStore.userInfo as UserInfo);
console.log(userInfo.value); // Every attribute in the user info object is empty

const eventLink = encodeURIComponent(window.location.origin + window.history.state.back);
const userinfoUrl= `user_id=${userInfo.value.userId}&username=${userInfo.value.username}
    &user_email=${userInfo.value.email}&event_link=${eventLink}`;
</script>

I pass mock user data into pinia mock store in the unit test, and I can print out user info object correctly in the test. However, it seems the mock user info data cannot pass to Vue SFC so that my test is always failed since user_id is an empty string. My question is how I pass mock store data into Vue SFC when doing testing? Thanks.

[posva]

The best would be to pass initial state to https://pinia.vuejs.org/api/interfaces/pinia_testing.TestingOptions.html#initialstate when creating the testing pinia

[LaurenceHo]

Unfortunately, I've already tried this approach. It didn't help either. I still got empty string from the state in the Vue SFC. :(

[LaurenceHo]

Finally figure it out. When initialising Pinia store in the unit test, the "store id" needs to be included, e.g:

const wrapper = mount(FeedbackDialog, {
      global: {
        plugins: [
          createTestingPinia({
            initialState: {
              user: {
                userAuthenticated : true,
                userInfo : {
                    userId: 'aaaa1234',
                    username: 'aaaa1234',
                    initials: 'AA',
                    email: 'test@test.com',
                    completeUserOnboard: true
                },              
              }
            },
          }),
        ],
      },
    });

[BenShelton]

Shouldn't userinfoUrl be a computed? Otherwise it will just be whatever the starting state of the user store is and not update as the user store updates.

const userinfoUrl= computed(() => `user_id=${userInfo.value.userId}&username=${userInfo.value.username}
    &user_email=${userInfo.value.email}&event_link=${eventLink}`);

[LaurenceHo]

I don't think it's necessary since userInfo is already a computed object.

const userInfo = computed(() => piniaUserStore.userInfo as UserInfo);
console.log(userInfo.value); // Every attribute in the user info object is empty

My main point is not userInfoUrl. The issue is every attribute in userInfo computed object is empty so that userInfoUrl doesn't contain the value I expected. I even tried initialising state in the beginning of the test when creating wrapper but still no luck.
e.g

const wrapper = mount(FeedbackDialog, {
      global: {
        plugins: [
          createTestingPinia({
            initialState: {
              userAuthenticated : true,
              userInfo : {
                  userId: 'aaaa1234',
                  username: 'aaaa1234',
                  initials: 'AA',
                  email: 'test@test.com',
                  completeUserOnboard: true
              },
            },
          }),
        ],
      },
    });

I still got empty attribute in the SFC when running unit test.
I wonder how everyone writes the unit unit when they use Pinia? I encountered the same issue in different project with Pinia store.