如何解决如何使用 Jest 和 Enzyme 对 React 组件进行单元测试,其中其 useEffect 函数中有 API 调用
Jest 和 Enzyme 的新手。我不确定如何为这种情况计划单元测试:
我有一个名为“Monitor.jsx”的组件。它是一个功能组件。它具有以下特点:
-
有一个状态:
const [isLoading,setIsLoading] = useState(true);
-
在我的 web 应用程序中,我使用“Okta”进行授权和身份验证。因此,每次用户登录和切换页面时,都会进行身份检查,例如在 "Monitor.jsx":
const { authState,authService } = uSEOktaAuth();
中。我需要在useEffect
函数的 API 调用中从他们那里传递令牌和 clientId:useEffect(() => { const payload = { headers: { access_token: authState.accesstoken,client_id: authService._oktaAuth.options.clientId,},}; (async () => { await getDataAPI(payload) .then((res) => { ...
-
当 API 完成、获取数据并准备呈现时,我将状态
isLoading
更新为 false,这意味着该组件已完成加载。 -
加载“完成”后,我通过以下方式在屏幕上呈现“真实”元素和信息:
return (authState.isAuthenticated && !isLoading) ? <div className="monitor-list__cardContainer"> [real content based on data from APIs] ... </div> : <p>loading...</p>
所以一次测试它们似乎有点复杂(例如在 Monitor.test.jsx 中),但它们确实涉及同一个组件,“Monitor.jsx”。我正在苦苦思索如何计划我的测试,根据我所描述的内容对该组件进行单元测试的程序是什么。
请提出建议,即使是一些虚拟代码也会更好。
解决方法
我认为没有那么复杂:您只需要从您的测试中调用 useEffect
(修改任何存在的依赖项)。那么您想要测试的只是 API 请求(我推荐 axios-mock-adapter
)以及 <p>...loading</p>
的存在/不存在。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。