Тестирование заголовка 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 прямо на странице, к сожалению, та же проблема.

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


reactjs next.js jestjs react-testing-library testing-library
person devvvyloper    schedule 09.06.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

Должен быть:

it('should render the title', async () => {
      ...
      await waitFor(() => {
          expect(document.title).toEqual('test title');
      });
});
person Estus Flask    schedule 09.06.2020
comment
проблема заключается в том, что я либо получаю ложные срабатывания (просто попробуйте заменить «заголовок теста» любым другим, это даст вам ложное срабатывание), либо он показывает: - person devvvyloper; 09.06.2020
comment
Есть ли у вас ложные срабатывания с await waitFor? В OP это не совсем ложное срабатывание, утверждение просто происходит вне теста (вероятно, будет отображаться неперехваченное исключение, если тестовый запуск будет достаточно длинным). Я не уверен, почему received value must be an HTMLElement or an SVGElement может случиться здесь. toEqual не должен вызывать эту ошибку, если он не был изменен. Пожалуйста, предоставьте stackoverflow.com/help/mcve, который может воспроизвести проблему. Попробуйте repl.it/languages/jest - person Estus Flask; 09.06.2020
comment
только что создал тест repl.it;) - person devvvyloper; 09.06.2020
comment
repl.it/repls/MassiveAnimatedPrivatearysoftware#index.spec.js - person devvvyloper; 09.06.2020
comment
Привет, @Estus Flask, не могли бы вы еще раз взглянуть на этот repl.it пример? :) - person devvvyloper; 10.06.2020
comment
Ошибка, о которой вы упомянули, не отображается, она более значима, Expected: "dsaijijdaijda" Received: "". Это имеет смысл, потому что вы пытаетесь изменить заголовок в _documents, но отображаете только страницу. Я не уверен, что все-таки стоит тестировать Next с помощью react-testing-library. Предполагается, что он проверяет реальное поведение, но вы сможете тестировать компоненты только частично без специфических для Next вещей. Также обратите внимание, что заголовок в _documents является ошибкой, github.com/vercel/next.js/blob/master/errors/. Скорее всего, вам нужно будет протестировать _apps и смоделировать Head компонент с помощью jest.mock. - person Estus Flask; 10.06.2020