Guidelines for testing with initial data in TypeScript

[ivancuric]

I'm trying to wrap my head around how to structure the store to provide the following features:

1. ability to extract methods outside of the store itself (state / actions)
2. have the ability to create the store with custom initial data for testing
3. good type inference

Initially I started with something like

interface AppState extends State {
  count: number;
  add: (number: number) => void;
  reset: () => void;
}

const useStore = create<AppState>((set) => ({
  count: 0,
  add: (number) => set((state) => ({ count: state.count + number })),
  reset: () => set({ count: 0 }),
}));

To tackle the 1st point I had the functions extracted and take the state as a parameter inside set but it feels pretty bad ergonomically:

const useStore = create<AppState>((set) => ({
  count: 0,
  add: (number) => set((state) => add(number, state)),
  reset: () => set(reset()),
}));

function add(number: number, state: AppState) {
  return { count: state.count + number };
}

function reset() {
  return { count: 0 };
}

Having the actions as functions which just work on the store as a side effect is also an option, however as far as I'm aware this completely prevents me from using something like a state creator to enable testing with custom initial data:

interface AppState extends State {
  count: number;
}

const useStore = create<AppState>(() => ({
  count: 0,
}));

// extracted "actions"
function add(number: number) {
  useStore.setState((state) => ({ count: state.count + number }));
}

function reset() {
  useStore.setState({ count: 0 });
}

I'm honestly a bit lost at this point.

[dai-shi]

As far as I know, there's no magically ideal pattern for this.

You may or may not be a little more comfortable with this?

interface AppState extends State {
  count: number;
  add: (number: number) => void;
  reset: () => void;
}

const createActions = (set: SetState<AppState>) => ({
  add: (number) => set((state) => ({ count: state.count + number })),
  reset: () => set({ count: 0 }),
})

const useStore = create<AppState>((set) => ({
  count: 0,
  ...createActions(set),
}));

[ivancuric]

Thanks, man! That pattern extracts the actions, but the number parameter isn't inferring types from AppState. Some more manual TS is needed:

interface AppState {
  count: number;
}

interface Actions {
  add: (number: number) => void;
  reset: () => void;
}

type Store = AppState & Actions & State;

const initialState: AppState = {
  count: 0,
};

const createActions = (set: SetState<Store>) =>
  ({
    add: (number) => set((state) => ({ count: state.count + number })),
    reset: () => set({ count: 0 }),
  } as Actions);

const useStore = create<Store>((set) => ({
  ...initialState,
  ...createActions(set),
}));

As for the testing part, I figured that I'd just be using this in jest, for custom initial state:

  beforeEach(() => useStore.setState({ count: 5 }));