Asserting Async Svelte Store Transitions with Deferred Promises

import { writable } from 'svelte/store';
import { expect, test } from 'vitest';
 
function createAsyncStore(fetcher) {
  const { subscribe, set } = writable({ data: null, loading: false, error: null });
  return {
    subscribe,
    async load() {
      set({ data: null, loading: true, error: null });
      try {
        const data = await fetcher();
        set({ data, loading: false, error: null });
      } catch (err) {
        set({ data: null, loading: false, error: err.message });
      }
    }
  };
}
 
test('emits intermediate loading state during pending fetch resolution', async () => {
  let resolvePromise;
  const mockFetcher = () => new Promise(res => { resolvePromise = res; });
  const store = createAsyncStore(mockFetcher);
  
  const states = [];
  const unsubscribe = store.subscribe(s => states.push(s));
  
  const loadPromise = store.load();
  expect(states.at(-1)).toEqual({ data: null, loading: true, error: null });
  
  resolvePromise('success_data');
  await loadPromise;
  expect(states.at(-1)).toEqual({ data: 'success_data', loading: false, error: null });
  unsubscribe();
});