/**
* @jest-environment jsdom
*/
import { renderHook, act } from "@testing-library/react-hooks";
import useLocalState from "../src";
beforeEach(() => {
localStorage.clear();
});
describe("useLocalState()", () => {
it("stores initial value as string", async () => {
const key = "key";
const value = "something";
const { result } = renderHook(() => useLocalState(key, value));
const [values] = result.current;
expect(values).toEqual(value);
});
it(`initial value isn't stored into localStorage`, async () => {
const key = "key";
const value = "something";
renderHook(() => useLocalState(key, value));
expect(localStorage.getItem(key)).toEqual(null);
});
it("stores initial value as boolean", async () => {
const key = "key";
const value = false;
const { result } = renderHook(() => useLocalState(key, value));
const [values] = result.current;
expect(values).toEqual(value);
});
it("stores initial value as object", async () => {
const key = "key";
const value = {
something: "else",
};
const { result } = renderHook(() => useLocalState(key, value));
const [values] = result.current;
expect(values).toEqual(value);
});
it("stores initial value as array", async () => {
const key = "todos";
const values = ["first", "second"];
const { result } = renderHook(() => useLocalState(key, values));
const [todos] = result.current;
expect(todos).toEqual(values);
});
it("accepts callback as an initial value", async () => {
const key = "todos";
const values = ["first", "second"];
const callback = () => values;
const { result } = renderHook(() => useLocalState(key, callback));
const [todos] = result.current;
expect(todos).toEqual(values);
});
it("accepts callback as a initial value and can be updated", async () => {
const key = "todos";
const values = ["first", "second"];
const callback = () => values;
const { result } = renderHook(() => useLocalState(key, callback));
const [initialValues] = result.current;
expect(initialValues).toEqual(values);
const newValue = ["third", "fourth"];
act(() => {
const setValue = result.current[1];
setValue(newValue);
});
const [changedValues] = result.current;
expect(changedValues).toEqual(newValue);
});
it("can update value as string", async () => {
const key = "key";
const value = "something";
const { result } = renderHook(() => useLocalState(key, value));
const [initialValue] = result.current;
expect(initialValue).toEqual(value);
const newValue = "something else";
act(() => {
const setValue = result.current[1];
setValue(newValue);
});
const [values] = result.current;
expect(values).toEqual(newValue);
});
it("can update value as function", async () => {
const key = "key";
const value = "something";
const { result } = renderHook(() => useLocalState(key, value));
const [initialValue] = result.current;
expect(initialValue).toEqual(value);
const newValue = " else";
act(() => {
const setValue = result.current[1];
setValue((v) => v + newValue);
});
const [values] = result.current;
expect(values).toEqual("something else");
});
it("can update value as function multiple times", async () => {
const key = "key";
const value = "something";
const { result } = renderHook(() => useLocalState(key, value));
const [initialValue] = result.current;
expect(initialValue).toEqual(value);
const newValue = " else";
act(() => {
const setValue = result.current[1];
setValue((v) => v + newValue);
});
const newValue2 = " again";
act(() => {
const setValue = result.current[1];
setValue((v) => v + newValue2);
});
const [values] = result.current;
expect(values).toEqual("something else again");
});
it("can update value as object", async () => {
const key = "key";
const value = { something: "something" };
const { result } = renderHook(() => useLocalState(key, value));
const [initialValue] = result.current;
expect(initialValue).toEqual(value);
const newValue = { something: "else" };
act(() => {
const setValue = result.current[1];
setValue(newValue);
});
const [values] = result.current;
expect(values).toEqual(newValue);
});
it("can update value as array", async () => {
const key = "todos";
const values = ["first", "second"];
const { result } = renderHook(() => useLocalState(key, values));
const newValues = ["third", "fourth"];
act(() => {
const setValues = result.current[1];
setValues(newValues);
});
const [todos] = result.current;
expect(todos).toEqual(newValues);
});
it("updates state with callback function", async () => {
const key = "todos";
const values = ["first", "second"];
const { result } = renderHook(() => useLocalState(key, values));
const newValues = ["first", "second"];
act(() => {
const setTodos = result.current[1];
setTodos((current) => [...current, ...newValues]);
});
const [todos] = result.current;
expect(todos).toEqual([...values, ...newValues]);
});
it("does not fail even if invalid data is stored into localStorage", async () => {
const key = "todos";
const value = "something";
localStorage.setItem(key, value);
const newValues = ["first", "second"];
const { result } = renderHook(() => useLocalState(key, newValues));
const [todos] = result.current;
expect(todos).toEqual(newValues);
});
it("gets initial value from localStorage if there is a value", async () => {
const key = "todos";
const values = ["first", "second"];
localStorage.setItem(key, JSON.stringify(values));
const newValues = ["third", "fourth"];
const { result } = renderHook(() => useLocalState(key, newValues));
const [todos] = result.current;
expect(todos).toEqual(values);
});
it("does not throw an error with two states with different keys", async () => {
const keyA = "todos";
const keyB = "todos";
const valuesA = ["first", "second"];
const valuesB = ["third", "fourth"];
expect(() => {
renderHook(() => {
useLocalState(keyA, valuesA);
useLocalState(keyB, valuesB);
});
}).not.toThrow();
});
it("can handle `undefined` values", async () => {
const key = "todos";
const values = ["first", "second"];
const { result } = renderHook(() =>
useLocalState<string[] | undefined>(key, values)
);
act(() => {
const [, setValues] = result.current;
setValues(undefined);
});
const [value] = result.current;
expect(value).toBe(undefined);
});
it("can handle `null` values", async () => {
const key = "todos";
const values = ["first", "second"];
const { result } = renderHook(() =>
useLocalState<string[] | null>(key, values)
);
act(() => {
const [, setValues] = result.current;
setValues(null);
});
const [value] = result.current;
expect(value).toBe(null);
});
it("can reset to default value", async () => {
const key = "key";
const value = "something";
const { result } = renderHook(() => useLocalState(key, value));
const [initialValue] = result.current;
expect(initialValue).toEqual(value);
const newValue = "something else";
act(() => {
const setValue = result.current[1];
setValue(newValue);
});
const [changedValue] = result.current;
expect(changedValue).toEqual(newValue);
act(() => {
const resetValue = result.current[2];
resetValue();
});
const [resetValue] = result.current;
expect(resetValue).toEqual(value);
expect(localStorage.getItem(key)).toEqual(null);
});
it("can reset to default value as callback", async () => {
const key = "todos";
const values = ["first", "second"];
const callback = () => values;
const { result } = renderHook(() => useLocalState(key, callback));
const [initialValues] = result.current;
expect(initialValues).toEqual(values);
const newValues = ["third", "fourth"];
act(() => {
const setValues = result.current[1];
setValues(newValues);
});
const [changedValues] = result.current;
expect(changedValues).toEqual(newValues);
act(() => {
const resetValues = result.current[2];
resetValues();
});
const [resetValues] = result.current;
expect(resetValues).toEqual(values);
expect(localStorage.getItem(key)).toEqual(null);
});
it("does not change the setter when value is updated", async () => {
const key = "key";
const value = "something";
const { result } = renderHook(() => useLocalState(key, value));
const setterOne = result.current[1];
const newValue = "something else";
act(() => {
const setValue = result.current[1];
setValue(newValue);
});
const setterTwo = result.current[1];
expect(setterOne).toEqual(setterTwo);
});
it("does not change the setter when value is updated via function", async () => {
const key = "key";
const value = "something";
const { result } = renderHook(() => useLocalState(key, value));
const setterOne = result.current[1];
const newValue = " else";
act(() => {
const setValue = result.current[1];
setValue((v) => v + newValue);
});
const setterTwo = result.current[1];
expect(setterOne).toEqual(setterTwo);
});
});
