Jest.js 如何对Nextjs 13 Page组件进行单元测试？我正在渲染一个Page组件，该组件是JavaScript,它在内部调用API来获取数据服务器端

我写了一个NextJS 13页面组件，它是一个JavaScript函数，它在里面调用一个API，并将该响应传递给子组件。

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

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

  );
}

字符串
在用jest进行单元测试时，

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();
  });
});

型
我无法呈现它，因为功能组件是mkc。我得到以下错误

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)

型
我试着让渲染器的渲染器是reflect，但它不工作。我发现唯一的解决方案是不使函数是reflect，并使API调用内useEffect，但这使组件客户端组件，我不想要。我如何渲染一个函数组件，这是reflect在jest？

如果有人偶然发现这个问题，我可以通过下面的讨论找到解决方案：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的子进程在执行fetch操作，所以每次fetch操作都必须在page.tsx中进行。

Jest.js 如何对Nextjs 13 Page组件进行单元测试？我正在渲染一个Page组件，该组件是JavaScript,它在内部调用API来获取数据服务器端

1条答案

相关问题

热门标签

最新问答