如何测试返回JSX.Element且包含API请求的React函数？

问题背景 #

我有一个自定义link函数，当鼠标悬停在用户名上时会返回展示用户卡片的JSX.Element。其中UserCard组件通过React Query的useGetApiV1UsersP1钩子请求用户信息。我尝试用Jest、react-test-renderer或@testing-library/react为该函数编写测试，覆盖包括UserCard展示在内的所有场景。

尝试过的方法 #

1. react-test-renderer生成快照 #

无法等待API请求完成，快照仅显示加载状态：

<span>
  Still loading. 0
</span>

2. @testing-library/react的render方法 #

遇到同样的加载状态问题：

<span xmlns="http://www.w3.org/1999/xhtml">Still loading. 0</span>

我知道测试钩子时可以用waitFor()，但不清楚如何和组件render结合：

const { result } = renderHook(() => useGetApiV1UsersP1('userId'), { wrapper })
await waitFor(() => {
  expect(result.current.isSuccess).toBe(true)
})

疑问 #

• 使用快照测试link这类函数是否合理？
• 是否有其他测试方法？
• 应该如何实现等待请求完成，从而测试UserCard的展示状态？

我的测试代码 #

// 通用部分
const queryClient = new QueryClient()
const Wrapper = (props: { children: any }) => (
  <QueryClientProvider client={queryClient}>{props.children}</QueryClientProvider>
)

const expectation = nock('http://localhost')
  .get('/api/v1/users/userId')
  .reply(200, {
    person: {
      firstName: 'Bruce',
      lastName: 'Lee',
    }
  })

// 第一种测试：react-test-renderer
describe('renderer test', () => {
  describe('link', () => {
    test('users', async () => {
      const usersLink = renderer
        .create(<Wrapper children={link(`#/v1/users/userId`, ['text'])} />)
        .toJSON()

       expect(usersLink).toMatchSnapshot()
    })
  })
})

// 第二种测试：@testing-library/react
describe('renderer test', () => {
  describe('link', () => {
    test('users', async () => {
      const serializer = new XMLSerializer()
      const { asFragment } = render(link(`#/v1/users/userId`, ['text']), { wrapper })
      await waitFor(() => {
        // 这里不知道怎么对比序列化后的内容
      })
    })
  })
})

内容的提问来源于stack exchange，提问作者Danil Parkhomenko