测试上下文提供者组件中的功能

时间:2020-03-16 21:44:27

标签: reactjs testing react-hooks react-context

我有一个基本的UserContext组件,该组件传递了以下两个功能:hasPermissions用于检查当前用户是否具有一定的权限,以及userScope,它返回当前用户的访问范围。此提供程序还会传递当前用户和组件状态下用于更新用户的功能。

export const UserProvider = ({ children }) => {
  const [user, setUser] = useState({});

  const userScope = useMemo(() => { ... }, [user]);

  const hasPermissions = useCallback((permissions) => { ... }, [user]);

  return (
    <UserContext.Provider
      value={{
        user,
        userScope,
        setUser,
        hasPermissions
      }}
    >
      {children}
    </UserContext.Provider>
  );
};

export function useUser() {
  return React.useContext(UserContext);
}

如何测试功能hasPermissionsuserScope?我遇到的有关测试React上下文组件的每篇文章都专注于测试使用者组件的行为以及它们如何处理来自Provider的模拟值并分析DOM的输出。相反,我想测试UserProvider中定义的这些函数的返回值。

我真的是React上下文API的新手,所以我不确定应该采用哪种适当的测试策略。我应该像其他功能组件一样尝试测试此提供程序组件吗?我应该将userScopehasPermission移到它们自己的导出函数并将它们作为简单的纯函数进行测试吗?我只是在寻找适合的测试计划。谢谢!

0 个答案:

没有答案