Реагировать на тестирование собственного провайдера

Question

Возьмем этого поставщика в качестве примера:

export const reducer = (state: AuthState, action: any): AuthState => {
  switch (action.type) {
    case "auth":
      return {
        ...state,
        authenticated: action.payload.authenticated,
      };
    default:
      return state;
  }
};

const AuthContextProvider: React.FC = ({ children }) => {
  const [state, dispatch] = React.useReducer(reducer, initialState);

  const signIn = async (username: string, password: string) => {
    try {
      await Auth.signIn({
        username,
        password,
      });
      dispatch({ type: "auth", payload: { authenticated: true } });
    } catch (error) {
      dispatch({ type: "auth", payload: { authenticated: false } });
    }
  };

  return (
    <AuthContext.Provider
      value={{
        ...state,
        signIn,
      }}
    >
      {children}
    </AuthContext.Provider>
  );
};

Я хочу проверить следующее:

• Мне нужно убедиться, что Auth.signIn называется
• Убедитесь, что редуктор вызывается и правильно обновляет состояние

Я изо всех сил пытаюсь реализовать это. Я понимаю, что могу заглушить метод signIn, принадлежащий объекту Auth, но как мне на самом деле справиться с этим в моем тесте? Я пытался следовать инструкциям asyn c на Jest, но я не могу его применить. Я не совсем уверен, как на самом деле проверить поставщика / потребителя . Например, я могу отрисовать его и создать простой компонент, который вызывает signIn и заглушить его с помощью Sinon?

Мне нужно руководство, я новичок в использовании ловушек React и раньше, сделал это с компонентами класса, которые упростили его так как я мог заглушить методы непосредственно из поверхностного визуализированного компонента, используя instance().