反应开玩笑测试错误 - 未定义 useContext 的对象

Posted 2023-04-14

【中文标题】反应开玩笑测试错误 - 未定义 useContext 的对象

【英文标题】：React jest testing error - object of useContext not defined

【发布时间】：2021-06-25 15:15:59

【问题描述】：

希望你们在这种情况下都做得很好 :) 在 React 应用程序的 App 组件中运行渲染测试时，我遇到了 useContext 错误。

这是 上下文 api：

const userId = useContext(UserContext);

这是错误：

TypeError：无法解构“（0，_react.useContext）（...）”的属性“userId”，因为它未定义。

35 | const userId = useContext(UserContext);

该对象在开始时未定义，因为它是获取 userId 的 API 调用。登录后，userId 可用。所以在开发中运行时，它可以完美运行，但是在运行测试时，它会显示此错误。

最后是 UserContext 组件：

export const UserContext = createContext();

 const UserProvider = ( children ) => 
   const [userId, setUserId] = useState("");
   const getUserId = async () => 
     if (token) 
       await axios
         .get(`$baseURL/auth/user`, 
           headers: 
             authorization: token
           
         )
         .then(function (response) 
           const  data  = response;
           return setUserId(data.userId);
         )
         .catch(function (err) 
           if (err.response)
             return toast.error(
               <div>
                 <InfoIcon style= marginBottom: "6px"  />
                 <p>
                   getUserId - err.response.status - err.response.message
                 </p>
               </div>
             );
           return toast.error(
             <div>
               <InfoIcon style= marginBottom: "6px"  />
               <p>User Context - CORS</p>
             </div>
           );
         );
     
   ;
   useEffect(() => 
     getUserId();
   , []);

   return (
     <UserContext.Provider value= userId >children</UserContext.Provider>
   );
 ;
 export default UserProvider;

【问题讨论】：

你能展示一下你的测试是什么样子的吗？

【参考方案1】：

我需要查看您的 test.js 文件。但是您应该在测试文件中渲染包含上下文组件的组件，以避免在没有它的情况下渲染错误。 在您的情况下，您应该： render(<UserProvider><App /></UserProvider> 在你的 test.js 文件中。