将 Jest 与异步服务器组件结合使用

Question

我正在尝试测试一个 React 服务器组件，它返回一个 Promise。Jest 中的标准render方法不喜欢这样。

我检查了类似的问题，但所有问题都 > 4 岁，并且正在处理componentDidMount等。

/// Home.tsx
async function Home(props: Props) : Promise<JSX.Element> {
 // call async functions to setup component
}

/// home.test.ts
describe('Home', () => {
  it('renders a heading', () => {
     render(<Home />);
  }
}

错误：

'Home' can not be used as a JSX element

关于如何解决这个问题有什么建议吗？一个明显的解决方案是让组件不返回 Promise，但我正在编写代码来满足不理想的测试框架。

Answer 1

在查看赏金时发生了这种情况。我不确定您已经尝试过什么，但我也许可以提供帮助。显然你知道 Jest 不能返回 Promise。然而，使用 test-utils 中的 act 可能有一个解决方法。尝试这样的事情

import { render } from '@testing-library/react';
import { act } from 'react-dom/test-utils';

describe('Home', () => {
  it('renders a heading', async () => {
    await act(async () => {
      render(await Home());
    });
  });
});