N
Nuxt•2mo ago
jpedro73

Hi! How to mockup multiples pinia stores?

I have this ts file that export a fn and this auxiliar fn uses two pinia stores, the "useProductionStore()"and the "useGlobalStore()": 
import type { ItemConvertedToActs } from '@/types/productions/summarySection'
import type { RersourceResultType, PieData, PieLabels, ConvertedEqItemType, NonWorkItemType, ConvertedHrItemType, AcivitiesSummaryData } from '@/types/components/productions/typesComponentsProductionsSummary'
import type { ActiviTyStatistcsType } from '@/types/resourcesTypes.ts'

const productionStore = useProductionStore()
const globalStore = useGlobalStore()

export function getActivitiesStatistics(acivitiesSummaryData: AcivitiesSummaryData): ActiviTyStatistcsType[] {
  console.time('getActivitiesStatistics')
  ...
  for (let i = 0; i < activitiesStatisticsWithActCode.length; i++) {
    ...
    const actDataArrayByType = **productionStore**.activitiesTabData[statisticItem.actType]
    ...
  }
  const newItem: ActiviTyStatistcsWithActCode = {
            'actCode': actItem.actCode,
            'center': globalStore.pickedCenter.code!,
            ...
          }
  }
}
import type { ItemConvertedToActs } from '@/types/productions/summarySection'
import type { RersourceResultType, PieData, PieLabels, ConvertedEqItemType, NonWorkItemType, ConvertedHrItemType, AcivitiesSummaryData } from '@/types/components/productions/typesComponentsProductionsSummary'
import type { ActiviTyStatistcsType } from '@/types/resourcesTypes.ts'

const productionStore = useProductionStore()
const globalStore = useGlobalStore()

export function getActivitiesStatistics(acivitiesSummaryData: AcivitiesSummaryData): ActiviTyStatistcsType[] {
  console.time('getActivitiesStatistics')
  ...
  for (let i = 0; i < activitiesStatisticsWithActCode.length; i++) {
    ...
    const actDataArrayByType = **productionStore**.activitiesTabData[statisticItem.actType]
    ...
  }
  const newItem: ActiviTyStatistcsWithActCode = {
            'actCode': actItem.actCode,
            'center': globalStore.pickedCenter.code!,
            ...
          }
  }
}
My test file: 
import { it, expect, describe, test, vi } from 'vitest'
import { mockNuxtImport, mountSuspended } from '@nuxt/test-utils/runtime'
import storeProd from './data/productionStore.json'
...

mockNuxtImport('useProductionStore', () => {
  return () => {
    return storeProd
  }
})
describe('getAcivitiesSummaryData', () => {
  test('returns an object with effectiveWorkData and nonWorkData', async () => {
    const result = getActivitiesStatistics(acivitiesSummaryData)
    console.log(result);
    expect(result).toBeDefined()
    expect(result).toHaveProperty('effectiveWorkData');
    expect(result).toHaveProperty('nonWorkData');
    expect(result).toHaveProperty('pieDataEffectiveWork')
  })
})
import { it, expect, describe, test, vi } from 'vitest'
import { mockNuxtImport, mountSuspended } from '@nuxt/test-utils/runtime'
import storeProd from './data/productionStore.json'
...

mockNuxtImport('useProductionStore', () => {
  return () => {
    return storeProd
  }
})
describe('getAcivitiesSummaryData', () => {
  test('returns an object with effectiveWorkData and nonWorkData', async () => {
    const result = getActivitiesStatistics(acivitiesSummaryData)
    console.log(result);
    expect(result).toBeDefined()
    expect(result).toHaveProperty('effectiveWorkData');
    expect(result).toHaveProperty('nonWorkData');
    expect(result).toHaveProperty('pieDataEffectiveWork')
  })
})
My test file works well, but i can't find the way to mockup the other pinia store "useGlobalStore()"
5 Replies
kapa.ai
kapa.ai•2mo ago
Hi @jpedro73. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To mock multiple Pinia stores in your Nuxt test environment, you can use the mockNuxtImport function for each store you want to mock. Here's how you can modify your test file to mock both useProductionStore and useGlobalStore: 
import { it, expect, describe, test, vi } from 'vitest'
import { mockNuxtImport, mountSuspended } from '@nuxt/test-utils/runtime'
import storeProd from './data/productionStore.json'
import storeGlobal from './data/globalStore.json' // You'll need to create this file

// Mock useProductionStore
mockNuxtImport('useProductionStore', () => {
  return () => {
    return storeProd
  }
})

// Mock useGlobalStore
mockNuxtImport('useGlobalStore', () => {
  return () => {
    return storeGlobal
  }
})

describe('getAcivitiesSummaryData', () => {
  test('returns an object with effectiveWorkData and nonWorkData', async () => {
    const result = getActivitiesStatistics(acivitiesSummaryData)
    console.log(result);
    expect(result).toBeDefined()
    expect(result).toHaveProperty('effectiveWorkData');
    expect(result).toHaveProperty('nonWorkData');
    expect(result).toHaveProperty('pieDataEffectiveWork')
  })
})
import { it, expect, describe, test, vi } from 'vitest'
import { mockNuxtImport, mountSuspended } from '@nuxt/test-utils/runtime'
import storeProd from './data/productionStore.json'
import storeGlobal from './data/globalStore.json' // You'll need to create this file

// Mock useProductionStore
mockNuxtImport('useProductionStore', () => {
  return () => {
    return storeProd
  }
})

// Mock useGlobalStore
mockNuxtImport('useGlobalStore', () => {
  return () => {
    return storeGlobal
  }
})

describe('getAcivitiesSummaryData', () => {
  test('returns an object with effectiveWorkData and nonWorkData', async () => {
    const result = getActivitiesStatistics(acivitiesSummaryData)
    console.log(result);
    expect(result).toBeDefined()
    expect(result).toHaveProperty('effectiveWorkData');
    expect(result).toHaveProperty('nonWorkData');
    expect(result).toHaveProperty('pieDataEffectiveWork')
  })
})
In this example, you'll need to create a globalStore.json file (similar to your productionStore.json) that contains the mock data for the global store. The mockNuxtImport function is used to mock Nuxt's auto-import functionality, which is perfect for mocking Pinia stores in a Nuxt environment. This approach is recommended in the Nuxt documentation for testing. Remember that you need to mock all the properties and methods of the stores that your tested function uses. Make sure your mock data in storeProd and storeGlobal includes all the necessary properties (like activitiesTabData for productionStore and pickedCenter for globalStore). If you need to provide different implementations between tests or change the mock data dynamically, you can use vi.hoisted as described in the Nuxt documentation. This allows you to create and expose your mocks, which you can then modify between tests. Nuxt documentation on mockNuxtImport I hope this helps you mock both of your Pinia stores for your Nuxt tests! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@650735710059495455> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
jpedro73
jpedro73OP•2mo ago
@kapa.ai The documentation informs that you can only uses one mockNuxtImport per file, right?
kapa.ai
kapa.ai•2mo ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize for the confusion in my previous answer. You are correct to question this, and I need to clarify an important point from the Nuxt documentation. According to the Nuxt documentation on mockNuxtImport, it states: "mockNuxtImport can only be used once per mocked import per test file. It is actually a macro that gets transformed to vi.mock and vi.mock is hoisted, as described here." This means you can use mockNuxtImport multiple times in a single file, but only once for each specific import you're mocking. So, in your case, you can indeed mock both useProductionStore and useGlobalStore in the same file, as they are different imports. Here's the correct way to mock multiple stores in a single file: 
import { mockNuxtImport } from '@nuxt/test-utils/runtime'

mockNuxtImport('useProductionStore', () => {
  return () => ({
    // mock implementation for production store
  })
})

mockNuxtImport('useGlobalStore', () => {
  return () => ({
    // mock implementation for global store
  })
})
import { mockNuxtImport } from '@nuxt/test-utils/runtime'

mockNuxtImport('useProductionStore', () => {
  return () => ({
    // mock implementation for production store
  })
})

mockNuxtImport('useGlobalStore', () => {
  return () => ({
    // mock implementation for global store
  })
})
I apologize for any confusion my previous response may have caused. Thank you for bringing this to my attention, as it allows me to provide more accurate information. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@650735710059495455> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?