test store not updated in nested axios call

[havok2063]

I have a Vue component for a login form. On form submit it performs an axios call to log in. In the response it adds the auth data to a pinia store, then makes a second axios call to get additional user info to add to the store. The code itself runs fine in my application, and the login form works as expected.

I'm trying to write a test using vitest for the login. I've mocked the response data for both axios calls. The test successfully runs the first axios call, and updates the store.auth with the mocked test data. However, it fails to set the store.user with the mock test user data. Adding some logging, I can see the 2nd axios call is getting called, and it's returning the mock test user data, but I don't know why it's not updating the pinia store. Anyone know why this might be happening?

Login Vuetify Component

<template>
          <v-form v-model="valid" fast-fail @submit.prevent="login" id="login-form" ref="form">
            <v-card-title>Login</v-card-title>
            <v-card-text>
              <!-- input fields -->
              <v-text-field label="User" v-model="user" :rules="userRules" id="user"></v-text-field>
              <v-text-field label="Password" v-model="password" type="password" :rules="passRules" id="pass"></v-text-field>
            </v-card-text>

            <!-- login actions -->
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn type="submit" color="primary" :disabled="!valid" form="login-form" id="submitbtn">Login</v-btn>
              <v-btn color="secondary" @click="reset" id="resetbtn">Reset</v-btn>
            </v-card-actions>
          </v-form>
</template>

<script lang="ts" setup>
import { useAppStore } from '@/store/app'
import axios from 'axios'

// get the application state store
const store = useAppStore()

async function login() {
    // login via the valis API
    console.log('logging in now')

    await axios.post('/auth/login',
        {"username": user.value, "password": password.value},
        {headers: {'Content-Type': 'multipart/form-data'}})
        .then((response) => {
            // store the auth info
            store.auth = response.data
           // make 2nd axios call 
            get_user()
        })
}

async function get_user() {
    // get the user member info
    await axios.post('/auth/user', {}, {headers: store.get_auth_hdr()})
        .then((response) => {
            // store the user info
            store.user = response.data
            // set user as logged in
            store.logged_in = true
          })
}
</script>

Test

import { createTestingPinia } from '@pinia/testing'
import { useAppStore } from '@/store/app'
import LoginForm from '../LoginForm.vue'
vi.mock('axios')

describe('LoginForm', () => {
    const vuetify = createVuetify({ components, directives })
    const pinia = createTestingPinia()
    const store = useAppStore() // uses the testing pinia!

    axios.post.mockImplementation((url: string | string[]) => {
        if(url.includes(`/auth/login`)) {
            return Promise.resolve({data: {access_token: "test_token"}})
        } else {
            return Promise.resolve({data: {username: "test_user"}})
        }
    })

    it('logs in', async () => {

        const wrapper = mount(LoginForm, { global: { plugins: [vuetify, pinia]}})
        await wrapper.vm.$nextTick()

        // fill out form
        const form = wrapper.findComponent({ ref: 'form' })
        await form.get('#user').setValue('test123')
        await form.get('#pass').setValue('test123')
        expect(form.get("#user").element.value).toBe('test123')
        expect(form.get("#pass").element.value).toBe('test123')

        // trigger the form submission
        await form.trigger('submit.prevent')

        expect(axios.post).toHaveBeenCalledTimes(2)                    // passes
        expect(store.auth).toEqual({access_token: "test_token"})    // passes
        expect(store.user).toEqual({username: "test_user"})            // fails here
        expect(store.logged_in).toBe(true)                                        // also fails
    })
})

Test Error

 FAIL  src/components/__tests__/LoginForm.spec.ts > LoginForm > logs in
AssertionError: expected {} to deeply equal { username: 'test_user' }