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

编程问答 2022-06-01

问题描述

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

我有一个名为“Monitor.jsx”的组件。它是一个功能组件。它具有以下特点：

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

  2. 有一个 useEffect 函数。

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

  4. 这两个 API 调用是通过“axios”完成的，并且在每个 axios 实例之前，都有一个拦截器。

  5. 在我的 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) => {
        ...

  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”。我正在苦苦思索如何计划我的测试，根据我所描述的内容对该组件进行单元测试的程序是什么。

请提出建议，即使是一些虚拟代码也会更好。

解决方法

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

enzymeenzymejestjsoktareactjsreactjsreactjsreactjsunit-testing