react-use/tests/useLocalStorage.test.ts

import { renderHook, act } from '@testing-library/react-hooks';
import { useLocalStorage } from '../src';

const STRINGIFIED_VALUE = '{"a":"b"}';
const JSONIFIED_VALUE = { a: 'b' };

afterEach(() => {
  localStorage.clear();
  jest.clearAllMocks();
});

it('should return undefined if no initialValue provided and localStorage empty', () => {
  const { result } = renderHook(() => useLocalStorage('some_key'));

  expect(result.current[0]).toBeUndefined();
});

it('should set the value from existing localStorage key', () => {
  const key = 'some_key';
  localStorage.setItem(key, STRINGIFIED_VALUE);

  const { result } = renderHook(() => useLocalStorage(key));

  expect(result.current[0]).toEqual(JSONIFIED_VALUE);
});

it('should return initialValue if localStorage empty and set that to localStorage', () => {
  const key = 'some_key';
  const value = 'some_value';

  const { result } = renderHook(() => useLocalStorage(key, value));

  expect(result.current[0]).toBe(value);
  expect(localStorage.__STORE__[key]).toBe(`"${value}"`);
});

it('should return the value from localStorage if exists even if initialValue provied', () => {
  const key = 'some_key';
  localStorage.setItem(key, STRINGIFIED_VALUE);

  const { result } = renderHook(() => useLocalStorage(key, 'random_value'));

  expect(result.current[0]).toEqual(JSONIFIED_VALUE);
});

it('should properly update the localStorage on change', () => {
  const key = 'some_key';
  const updatedValue = { b: 'a' };
  const expectedValue = '{"b":"a"}';

  const { result } = renderHook(() => useLocalStorage(key));

  act(() => {
    result.current[1](updatedValue);
  });

  expect(result.current[0]).toBe(updatedValue);
  expect(localStorage.__STORE__[key]).toBe(expectedValue);
});

describe('Options with raw true', () => {
  it('should set the value from existing localStorage key', () => {
    const key = 'some_key';
    localStorage.setItem(key, STRINGIFIED_VALUE);

    const { result } = renderHook(() => useLocalStorage(key, '', { raw: true }));

    expect(result.current[0]).toEqual(STRINGIFIED_VALUE);
  });

  it('should return initialValue if localStorage empty and set that to localStorage', () => {
    const key = 'some_key';

    const { result } = renderHook(() => useLocalStorage(key, STRINGIFIED_VALUE, { raw: true }));

    expect(result.current[0]).toBe(STRINGIFIED_VALUE);
    expect(localStorage.__STORE__[key]).toBe(STRINGIFIED_VALUE);
  });
});

describe('Options with raw false and provided serializer/deserializer', () => {
  const serializer = (_: string) => '321';
  const deserializer = (_: string) => '123';

  it('should return valid serialized value from existing localStorage key', () => {
    const key = 'some_key';
    localStorage.setItem(key, STRINGIFIED_VALUE);

    const { result } = renderHook(() =>
      useLocalStorage(key, STRINGIFIED_VALUE, { raw: false, serializer, deserializer })
    );

    expect(result.current[0]).toBe('123');
  });
});