Jest testing current Recoil's state after change it

[joel-daros]

I have this simple state that stores the current filters applied:

export const datagridFiltersState = atom<DatagridFilters>({
  key: "datagridFilters",
  default: {
    House: undefined,
    Car: undefined,
  },
});

And a hook to remove (set filter as undefined) when its removed:

export const useRemoveFilter = () => {
  const setDatagridFilters = useSetRecoilState(datagridFiltersState);

  const removeFilter = React.useCallback(
    (filterName: keyof DatagridFilters) => {
      setDatagridFilters((currentDatagridFilters) => {
        // if the filter is not applied, don't mutate the state
        if (!currentDatagridFilters[filterName]) {
          // return the current state, this avoid to mutate the state
          return currentDatagridFilters;
        }
        return {
          ...currentDatagridFilters,
          [filterName]: undefined,
        };
      });
    },
    [setDatagridFilters]
  );

  return { removeFilter };
};

And I want to test this hook, verifying that when I remove a specific filter like “Car” its value changes to undefined, and it doesn't affect the value of the other applied filters.

This is my current Jest / react-testing-libray file:

  it("removes the current filter", async () => {
    // initializing the state with values
    const initializeState = ({ set }: MutableSnapshot) => {
      set(datagridFiltersState, { House: "foo", Car: "bar" });
    };

    const { result } = renderHook(() => useRemoveFilter(), {
      wrapper: ({ children }) => RecoilRoot({ initializeState, children }),,
    });
    const { removeFilter } = result.current;

    // removing the filter “Car”, so car will be undefined.
    await waitFor(() => removeFilter(“Car"));

   // this is not reflecting the current state changes
    const datagridFiltersStateSnapshot = snapshot_UNSTABLE();

    expect(
      datagridFiltersStateSnapshot
        .getLoadable(datagridFiltersState)
        .valueOrThrow()
    ).toEqual({
      House: “foo",
      Car: undefined,
    });

The test fails because the expected snapshot is not reflecting the current changes made in the Car filter.

How I can properly get the current value of the state to assert its value is correct after I've removed one of the filters?