Question

我有一个后续问题： Test component with context and react hook

最重要的答案是，不要创建新的上下文，而是将上下文/AuthContext 中的 AuthContext 用于，因为这是钩子使用的上下文。

我对这到底意味着什么感到困惑（本来可以发表评论，但还没有足够的代表发表评论）--有人可以通过代码沙箱向我展示它吗？

谢谢！

Answer 1

这只是说使用自定义钩子/组件正在使用的相同 React 上下文，而不是其他一些“随机”身份验证提供程序。

示例身份验证上下文：

export const useAuth = () =>  useContext(AuthContext);

export const AuthProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState();
  const [loading, setLoading] = useState(true);

  const signup = (email, password) => {
    return auth.createUserWithEmailAndPassword(email, password);
  }

  const login = (email, password) => {
    return auth.signInWithEmailAndPassword(email, password);
  }

  const logout = () => auth.signOut();

  ...

  const value = {
    currentUser,
    signup,
    login,
    logout,
  };

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

示例消费组件：

import { useAuth } from "../context/AuthContext"; // <-- specific context

export default function Dashboard() {
  const { currentUser, logout } = useAuth(); // <-- specific context

  ...

  return (
    <div>
      ...
    </div>
  );
}

特定的 AuthProvider 组件需要出现在 React 树中的组件上方，以便提供上下文和状态。

例如，如果像单元测试一样，您创建另一个 React Context 提供程序：

const AuthContext2 = createContext(); // AuthContext2 to disambiguate it here

并将组件包装在 AuthContext2.Provider 中，然后组件仍在导入和使用从上面的代码导出的 AuthProvider。

答案是说还要导入 AuthProvider 并为单元测试包装它，而不是创建一个全新的上下文。

import { AuthProvider } from "../context/AuthContext";

const AllTheProviders = ({ children }) => {
  return (
    <Router>
      <AuthProvider>
        {children}
      </AuthProvider>
    </Router>
  );
};

const customRender = (ui, options) => {
  render(ui, { wrapper: AllTheProviders, ...options });
};

使用带有 AuthContext 的 React 测试库测试组件

1 个答案: