如何使用Jest和Enzyme对React组件进行单元测试，其中在其useEffect函数中有API调用

Question

Jest和Enzyme的新手。我不确定如何为这种情况计划单元测试：

我有一个名为"；Monitor.jsx"；。它是一个功能组件。它具有以下功能：

1. 有一个状态：const [isLoading, setIsLoading] = useState(true);

2. 有一个useEffect函数。

3. 在useEffect函数中，有两个API调用。

4. 这两个API调用是通过；axios"；，在每个axios实例的前面，都有一个拦截器。

5. 在我的网络应用程序中，我使用"；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) => {
   ...
   

6. 当API完成，数据被提取并准备好呈现时，我将状态isLoading更新为false，这意味着该组件已完成加载。

7. 随着加载"；完成"；，然后，我将"；真实的"；元素和屏幕上的信息通过：

   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"；虽然我正在努力解决如何计划我的测试，根据我所描述的内容，对这个组件进行单元测试的过程是什么。

请建议，即使是一些伪代码也会更好。

Answer 1

我不认为这有那么复杂：您只需要从测试中调用useEffect(修改任何作为依赖项的内容(。那么您想要测试的只是API请求(我推荐axios-mock-adapter(和<p>...loading</p>的存在/不存在。