时间戳

首页 > 解决方案 > 使用带有 jest 和 react-testing-library 的 next/head 测试 next.js 标题，给出误报

reactjs - 使用带有 jest 和 react-testing-library 的 next/head 测试 next.js 标题，给出误报

问题描述

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

<html>
<InlineStylesHead />

<body>
    <Main />
    <NextScript />

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

</html>

然后我设置我的测试来呈现这个页面（它应该包括这个_document作为它的一部分）

它按预期工作（包括 SSR）。

所以我尝试使用react-testing-library和jest

这是我的测试：

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

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

你有没有使用任何其他技术来测试这种东西？谢谢！

标签： reactjsjestjsnext.jsreact-testing-librarytesting-library

解决方案

expect不给true，它只是在测试中被忽略。waitFor由于其性质是异步的，应该等待以影响测试结果。

它应该是：

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

推荐阅读