useSessionStorage and useLocalStorage for easy mocking - similar to MemoryRouter in react-router, but for storage

mocked-storage.tsx

import React, { FC, useMemo } from 'react';
import {
  LocalStorageProvider,
  SessionStorageProvider,
} from './use-storage';

// this is just a dumb mock of the storage interface
class MemoryStorage implements Storage {
  private data: Record<string, string> = {};

  getItem(key: string) {
    return this.data[key] ?? null;
  }

  setItem(key: string, value: string) {
    this.data[key] = value;
  }

  removeItem(key: string) {
    delete this.data[key];
  }

  clear() {
    this.data = {};
  }

  get length() {
    return Object.keys(this.data).length;
  }

  key(index: number) {
    return Object.keys(this.data)[index] ?? null;
  }
}

type Data = { [key: string]: unknown };

function useStorageMock(initialData: Data) {
  return useMemo(() => {
    const storage = new MemoryStorage();
    Object.keys(initialData).forEach((key) => {
      const value = initialData[key];
      if (typeof value === 'string') {
        storage.setItem(key, value);
      } else {
        storage.setItem(key, JSON.stringify(value));
      }
    });
    return storage;
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
}

type Props = { initialData: Data };

export const MockedLocalStorage: FC<Props> = ({ children, initialData }) => {
  const storage = useStorageMock(initialData);
  return (
    <LocalStorageProvider value={storage}>{children}</LocalStorageProvider>
  );
};

export const MockedSessionStorage: FC<Props> = ({ children, initialData }) => {
  const storage = useStorageMock(initialData);
  return (
    <SessionStorageProvider value={storage}>{children}</SessionStorageProvider>
  );
};

use-storage.ts

import { createContext, useContext } from 'react';

const LocalStorageContext = createContext(localStorage);
export function useLocalStorage() {
  return useContext(LocalStorageContext);
}
export const LocalStorageProvider = LocalStorageContext.Provider;

const SessionStorageContext = createContext(sessionStorage);
export function useSessionStorage() {
  return useContext(SessionStorageContext);
}
export const SessionStorageProvider = SessionStorageContext.Provider;