使用 next/head 和 jest 测试 next.js 标题,并使用 React-testing-library 给出误报

dev*_*per 9 reactjs jestjs next.js react-testing-library testing-library

我已经开始在我的最新项目中使用 Next.js,我想对页面实现一些测试。我创建了一个_document文件,在其中设置了我想要使用的所有元标记,包括页面标题。

<html>
<InlineStylesHead />

<body>
    <Main />
    <NextScript />

    <Head>
     <title>testing title</title>
    </Head>
</body>

</html>
Run Code Online (Sandbox Code Playgroud)

然后我设置测试来渲染此页面(应将其包含_document在其中)

它按预期工作(包括 SSR)。

然后我尝试使用react-testing-library和测试它jest

这是我的测试:

it('should render the title', () => {
      render(<Page />);
      waitFor(() => {
          expect(document.title).toEqual('test title');
      });
});

Run Code Online (Sandbox Code Playgroud)

不幸的是,它给了我误报,而expect无论如何,block 都会给出真实的结果。我也尝试过Head直接在页面上设置,不幸的是,同样的问题。

您是否使用过任何其他技术来测试此类事物?谢谢!

Est*_*ask 2

expect没有给出true,它只是在测试中被忽略。waitFor由于其本质是异步的,应该等待以影响测试结果。

它应该是:

it('should render the title', async () => {
      ...
      await waitFor(() => {
          expect(document.title).toEqual('test title');
      });
});
Run Code Online (Sandbox Code Playgroud)