Objects deleted from stores re-appearing while running tests

[chris-reeves]

Context

I have some code that is using pinia as its backing store. This code is being tested by some "unit" tests (actually, more like integration tests). I'm testing both the DOM and how changes are being reflected in the pinia store, so actions are not stubbed or mocked.

Because the tests mutate state, this must be reset in some way between tests. As far as I understand it, there's no way to create a "fresh" store for each test within a given test file. In addition, there's no reset() method implemented on the store at the moment (lets assume for the purposes of this discussion that that is not going to change).

Problem

In order to start from the same state for each test, any changes are reverted in the afterEach() of the tests that mutate state... or at least they should be. What I'm seeing seems a little strange. I confirm that the store is cleaned up as expected, using expectations and console logging in the afterEach(). The state is also correct when the top-level beforeEach() starts for the next test. But when useFooStore() is called as part of the beforeEach(), the item that was cleaned up in the afterEach() re-appears, causing problems for subsequent tests. I have no idea why this item that was deleted (and wasn't in the initial store) is re-appearing.

Question(s)

• Is there a way to create a "fresh" store for each test within a test file?
• Why does the state revert (to a non-initial state!) when useFooStore() is called?
• How could this approach be made to work?

I've included a pared down copy of the relevant code to illustrate this - just install the deps in your preferred way and run the test:unit target. Thanks in advance for any help.

pinia-test.zip

[posva]

Is there a way to create a "fresh" store for each test within a test file?

Yes, create a new pinia for each test (https://pinia.vuejs.org/cookbook/testing.html#Unit-testing-a-store)

[chris-reeves]

Thanks for the reply and taking a look at this.

OK, so createTestingPinia() doesn't actually create a new pinia instance? Looking at the code for createTestingPinia() suggests that it does, and my use of createTestingPinia() instead of createPinia() is the only difference that I see between my code and the example in the docs (which is what I'd been following). Or is the critical difference the need to call useFooStore() in each test, rather than in the beforeEach()? That also doesn't fit with my understanding of how pinia works, as my understanding is that that just maps to an existing store if one already exists.

[posva]

Can you paste the code of the tests and store instead of a zip?

[chris-reeves]

This is the store:

import { defineStore } from 'pinia'
import { v4 as uuidv4 } from 'uuid'
import { ref } from 'vue'

import { defaultFormations } from './formation-data'

export const useFormationStore = defineStore('formation', () => {
  const formations = ref(defaultFormations)

  function getFormation (id) {
    return formations.value.find(formation => formation.id === id)
  }

  function addFormation (formation) {
    if (!('id' in formation)) {
      formation.id = uuidv4()
      formations.value.push(formation)
    }
  }

  function deleteFormation (id) {
    formations.value = formations.value.filter(formation => formation.id !== id)
  }

  return {
    formations,
    getFormation,
    addFormation,
    deleteFormation
  }
}, { persist: true })

and these are the tests:

import { vi, describe, it, beforeEach, afterEach, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import { createTestingPinia } from '@pinia/testing'

import { useFormationStore } from '../../stores/formation.js'

import FormationsView from '../FormationsView.vue'
import { setActivePinia } from 'pinia'

describe('FormationsView', () => {
  let wrapper
  let formationStore

  beforeEach(async () => {
    console.log('== beforeEach ==')
    const thisPinia = createTestingPinia({
      stubActions: false,
      fakeApp: true,
      createSpy: vi.fn
    })
    setActivePinia(thisPinia)

    wrapper = mount(FormationsView, {
      global: {
        plugins: [thisPinia]
      }
    })
    if (formationStore) {
      console.log('formationStore.formations before useFormationStore')
      console.log(formationStore.formations)
      const testFormation = formationStore.formations.find(formation => formation.name === 'Test Formation')
      console.log(testFormation)
    }

    formationStore = useFormationStore()

    console.log('formationStore.formations after useFormationStore')
    console.log(formationStore.formations)
    const testFormation = formationStore.formations.find(formation => formation.name === 'Test Formation')
    console.log(testFormation)

    expect(wrapper.text()).not.toContain('Test Formation')
  })

  afterEach(async () => {
    wrapper.unmount()
  })

  describe('adding a formation', () => {
    let addModal

    beforeEach(async () => {
      console.log('== add object ==')
      await wrapper.get('#button-add').trigger('click')
      addModal = wrapper.find('#add-modal')
      await addModal.get('input[name=name]').setValue('Test Formation')
      await addModal.get('#button-save').trigger('click')
    })

    afterEach(async () => {
      console.log('== afterEach ==')
      expect(wrapper.text()).toContain('Test Formation')

      const addedFormation = formationStore.formations.find(formation => formation.name === 'Test Formation')
      const formationItem = wrapper.get(`#${addedFormation.id}`)

      console.log('before:')
      console.log(formationStore.getFormation(addedFormation.id))
      await formationItem.get('#button-delete').trigger('click')
      console.log('after:')
      console.log(formationStore.getFormation(addedFormation.id))

      const formationItemAfter = wrapper.find(`#${addedFormation.id}`)
      expect(formationItemAfter.exists()).toBe(false)
      expect(wrapper.text()).not.toContain('Test Formation')
      console.log('page does not contain Test Formation')

      const deletedFormation = formationStore.formations.find(formation => formation.name === 'Test Formation')
      expect(deletedFormation).toBeUndefined()
      console.log('store does not contain Test Formation')
    })

    it('the modal closes', () => {
      expect(wrapper.find('#add-modal').exists()).toBe(false)
    })

    it('the list item is added', () => {
      expect(wrapper.text()).toContain('Test Formation')
    })
  })
})

The expectation in the beforeEach() fails for the second test, despite all expectations in the afterEach() passing after the first test. The expectation in the beforeEach() will also pass if made before the call to useFormationStore().

[posva]

The problem is your defaultFormations. It's reused for all stores because it's a reference in js. Create a copy with ref({ ...defaultFormations }) or export a function that returns a fresh object rather than the object itself.

[chris-reeves]

Aaah, good spot! Thank you so much (again) for taking the time to look at this, and for the all the time you put into developing, maintaining and supporting the users of this plugin. You've really made my day - I had worked around this issue, but I really don't like not understanding unexpected behaviour and I'm so glad I asked this question now!

What you said made sense, but it took me a few minutes of staring at the code to figure out exactly what is happening and why my cleanup for other tests (not included for brevity) were working as expected. I'll give a brief explanation for the benefit of anyone that might come across this and have made a similar error.

• The store is initialised using a const array (defaultFormations). My error was to do a simple assignment rather than a clone/copy, so my store was essentially a reference to this original array.
• Tests that modified items in the store modified elements of the underlying defaultFormations array. My cleanup code successfully reverted these modifications because these were modified in place.
• Tests that deleted items in the store reassigned the store to point at a filtered array, so this no longer referenced defaultFormations (this is how I implemented delete). No cleanup was required here because when useFormationStore() was called again in the beforeEach() the store reverted to referencing defaultFormations, which contained all items.
• Tests that added items to the store pushed those items onto the end of the defaultFormations array. When the newly added item was deleted during the test cleanup, all it did was reassign the store to point at a filtered array. The newly added item remained at the end of defaultFormations, and thus reappeared when useFormationStore() was called and the store was reassigned back to reference defaultFormations.

The fix I went with in the end was to use structuredClone() to make a deep copy of defaultFormations when the store is initialised - the spread operator was too shallow. Thanks yet again for pointing me in the right direction.

[posva]

Note the function syntax works everywhere: const createDefaults = () => ({ ... })