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
确保调用reducer并正确更新状态

我正在努力实现这一目标。我知道可以对属于signIn对象的Auth方法进行存根，但是在测试中如何实际处理呢？我尝试遵循Jest上的异步指南，但似乎无法应用它。我不太确定如何真正测试提供者/消费者。就像我渲染它并创建一个简单的组件来调用signIn并将其与Sinon存根一样吗？

在这里我需要指导，我是使用React钩子的新手，之前，我是使用类组件完成此操作的，这使它变得更加容易，因为我可以使用instance()直接从浅化的呈现组件中对方法进行存根。

反应测试自定义提供程序

0 个答案: