如何对 Nextjs 13 页面组件进行单元测试？我正在渲染一个异步的页面组件。它在内部进行 API 调用以获取服务器端数据

Question

我编写了一个 Nextjs 13 页面组件，它是一个异步函数。它调用内部的 API 并将响应传递给子组件。

export default async function Home() {
  const participantsData: ParticipantInfo[] = await getParticipantsInfo();

  return (
    <div data-testid="home-page">
        <ParticipantsTable participantsInfo={participantsData} />
    </div>

  );
}

当用玩笑对其进行单元测试时，

const getRender = (): RenderResult => {
  return render(<Home />);
};

global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve(participantsMockData),
  }),
) as jest.Mock;

describe("Home Page Tests", () => {
  it("renders Home Page Component", async () => {
    getRender();

    expect(screen.getByTestId("home-page")).toBeDefined();
  });
});

我无法渲染它，因为功能组件是异步的。我收到以下错误

console.error
    Error: Uncaught [Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.]
        at reportException (C:\git\axo-auth-ui\node_modules\jsdom\lib\jsdom\living\helpers\runtime-script-errors.js:66:24)
        at innerInvokeEventListeners (C:\git\axo-auth-ui\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:353:9)
        at invokeEventListeners (C:\git\axo-auth-ui\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:286:3)
        at HTMLUnknownElementImpl._dispatch (C:\git\axo-auth-ui\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:233:9)
        at HTMLUnknownElementImpl.dispatchEvent (C:\git\axo-auth-ui\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:104:17)
        at HTMLUnknownElement.dispatchEvent (C:\git\axo-auth-ui\node_modules\jsdom\lib\jsdom\living\generated\EventTarget.js:241:34)
        at Object.invokeGuardedCallbackDev (C:\git\axo-auth-ui\node_modules\react-dom\cjs\react-dom.development.js:4213:16)
        at invokeGuardedCallback (C:\git\axo-auth-ui\node_modules\react-dom\cjs\react-dom.development.js:4277:31)
        at beginWork$1 (C:\git\axo-auth-ui\node_modules\react-dom\cjs\react-dom.development.js:27451:7)
        at performUnitOfWork (C:\git\axo-auth-ui\node_modules\react-dom\cjs\react-dom.development.js:26560:12)
        at workLoopSync (C:\git\axo-auth-ui\node_modules\react-dom\cjs\react-dom.development.js:26466:5)
        at renderRootSync (C:\git\axo-auth-ui\node_modules\react-dom\cjs\react-dom.development.js:26434:7)
        at performConcurrentWorkOnRoot (C:\git\axo-auth-ui\node_modules\react-dom\cjs\react-dom.development.js:25738:74)

我尝试使渲染异步，但它不起作用。我发现唯一的解决方案是不使函数异步，并在 useEffect 内进行 api 调用，但这会使组件成为客户端组件，这是我不想要的。我如何渲染一个开玩笑的异步功能组件？

Answer 1

如果有人偶然发现这个问题，我可以通过以下讨论找到解决方案：https ://github.com/vercel/next.js/issues/42292

// component
// app/[locale]/page.tsx

const Home = async ({ params }: { params: { locale: 'en' | 'de' } }) => {
  const { data } = await fetchProjects(locale) as { data: string[] };
  return (
     <HomePage {...{data}} />
  )
 }

// I want to build paths on build time, use whatever you need in your case
export const generateStaticParams = () => {
  return [
    { locale: 'en' },
    { locale: 'de' }
  ],
}

export default Home;


// test
describe("Home", () => {
  it("renders the home page with the correct props", async () => {
    const Resolved = await Home({ params: { locale: 'en' } });    
    const { getByText } = render(Resolved);
    expect(getByText("Project 1")).toBeInTheDocument();
  });
});

只需确保没有 ssr 子级正在执行提取，因此每次提取都必须在 page.tsx 中进行。还应该嘲笑 fetch。