A section dedicated for proper test configuration

[mateuszJS]

I couldn't find any section dedicated for resetting states between test cases. I don't mean like manually reseting state in test file or in code base, but providing test configuration similar to what zustand does here.

In my case it's Jest and so far I'm using only proxyMap so I wrote this:

import type * as ValtioUtils from 'valtio/utils'
import { act } from '@testing-library/react'
export * from 'valtio/utils'

const { proxyMap: actualProxyMap } =
  jest.requireActual<typeof ValtioUtils>('valtio/utils')

// a variable to hold reset functions for all stores declared in the app
export const storeResets = new Set<{
  actual: ReturnType<typeof actualProxyMap>
  initial: Map<unknown, unknown> | undefined | null
}>()

export const proxyMap = <K, V>(entries?: Iterable<[K, V]> | undefined | null) => {
  const initial = typeof entries === 'object' ? new Map(entries) : entries
  const store = actualProxyMap<K, V>(entries)
  storeResets.add({ actual: store, initial })
  return store
}

// reset all stores after each test run
afterEach(() => {
  act(() => {
    storeResets.forEach(({ actual, initial }) => {
      // Remove all existing keys from actual
      actual.keys().forEach((key) => {
        actual.delete(key)
      })

      if (initial) {
        initial.forEach((value, key) => {
          actual.set(key, value)
        })
      }
    })
  })
})

This script just collects all usages of proxyMap and resets them after each test.

You just have to place it in your project root folder/__mocks__/valtio/utils.ts

Is there anything similar done for valtio so far and I've just missed it? I'm asking because valtio seems to be popular enough to have a section for proper test configuration.

[overthemike]

@dai-shi I wonder if this might be a use case that valtio-plugin might be able to help solve pretty easily with it's concept of proxy instances. What do you think?

[dai-shi]

It feels to me that what valtio-plugin solves and the test requirement are different things, even though it might help.
I'm not against to you writing a best practice doc with valtio-plugin and ask @mateuszJS for review.

[overthemike]

I was thinking along the lines of creating a new proxy instance for each test that would need it. This would eliminate the need for resetting state in a beforeEach() For example:

import { proxy } from 'valtio-plugin'

describe('User Store', () => {
    // Helper to create a fresh user store for each test
    const createUserStore = () => {
      const instance = proxy.createInstance()
      return instance({
        user: {
          id: null,
          name: '',
          email: '',
          preferences: {
            theme: 'light',
            notifications: true
          }
        },
        isLoading: false,
        errors: []
      })
    }
    
    it('should update user profile', () => {
      const store = createUserStore()
      
      store.user.name = 'John Doe'
      store.user.email = '[email protected]'
      
      expect(store.user.name).toBe('John Doe')
      expect(store.user.email).toBe('[email protected]')
    })
    
    it('should toggle theme preference', () => {
      const store = createUserStore()
      
      expect(store.user.name).toBe('')
      
      expect(store.user.preferences.theme).toBe('light')
      
      store.user.preferences.theme = 'dark'
      expect(store.user.preferences.theme).toBe('dark')
    })
    
    it('should handle loading states', () => {
      const store = createUserStore()
      
      store.isLoading = true
      expect(store.isLoading).toBe(true)
      
      store.isLoading = false
      expect(store.isLoading).toBe(false)
    })
    
    it('should manage error arrays', () => {
      const store = createUserStore()
      
      store.errors.push('Invalid email')
      store.errors.push('Name required')
      
      expect(store.errors).toHaveLength(2)
      expect(store.errors[0]).toBe('Invalid email')
    })
  })