Тестирование заголовка next.js с использованием next / head с jest и react-testing-library дает ложные срабатывания

Я начал использовать 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блок дает истину, несмотря ни на что. Я также попытался установитьHead прямо на странице, к сожалению, такая же проблема.

Вы использовали какой-либо другой метод для тестирования подобных вещей? Спасибо!

Источник

2 ответа

expect не дает true, это просто игнорируется в тесте. waitFor является асинхронным по своей природе, и его следует ждать, чтобы повлиять на результат теста.

Должен быть:

it('should render the title', async () => {
      ...
      await waitFor(() => {
          expect(document.title).toEqual('test title');
      });
});
Источник

Вы могли бы издеватьсяnext/headчтобы заставить его отображать своих детей:

      jest.mock('next/head', () => {
  return {
    __esModule: true,
    default: ({ children }: { children: Array<React.ReactElement> }) => {
      return <>{children}</>;
    },
  };
});

Я получил решение отсюда: https://github.com/vercel/next.js/discussions/11060#discussioncomment-33628 .

Источник
Другие вопросы по тегам