使用 Jest Enzyme 和 React 测试库对条件渲染代码进行 React 单元测试

【问题标题】：React unit test for conditionally rendered code using Jest Enzyme & React Testing Library使用 Jest Enzyme 和 React 测试库对条件渲染代码进行 React 单元测试
【发布时间】：2022-06-15 03:27:16
【问题描述】：

我是单元测试的新手，但仍在搞清楚概念。我有一个使用 SWR 获取数据的 React 17 功能组件。根据响应，我要么显示错误消息，要么显示组件内容。我遇到的问题是我无法测试仅在 API 调用出错时才显示的条件消息。

export const TestComponent = () => {
  const { data, error } = useSWR('api/data');

  if (error) return <div id='error-div'>Failed to load data from API</div>

  return (
    <div>
     <ul>
       <li>Name: {data.name}</li>
       <li>Name: {data.name}</li>
       <li>Name: {data.name}</li>
     </ul>
   </div>
}

在上面的代码中，我无法测试“error-div”，因为我无法模拟 SWR 的错误值，这会降低我的测试覆盖率。我一直在读到不应更改状态以进行单元测试，因此我无法将错误值设置为 true。在这种情况下，是否有另一种方法可以覆盖单元测试中的错误 div？

我在 Enzyme 和 React 测试库的帮助下使用 Jest 进行单元测试。

附： fetcher 是全局定义的（ref），看起来像：

const fetcher = async(url: string) => await axios.get(url, { headers: { authorization: 9999 } }).then((res) => res.data);

【问题讨论】：

• 你的fetcher在哪里？不应该是useSWR('/api/data', fetcher)？

标签： reactjs jestjs enzyme react-testing-library swr