Можно ли получить полную страницу HTML при использовании React/Enzyme/Jest с Nextjs?

У меня есть компонент React, который выглядит следующим образом:

import React from 'react';
import Head from 'next/head';

export default class extends React.Component {
  static defaultProps = {
    language: 'en',
    country: 'us'
  };

  ...

  render () {
    const language = this.props.language || 'en';
    const country = this.props.country || 'us';

    return (
      <div className="edf-header">
        <div  className="desktop-header"></div>
        <div  className="mobile-header"></div>

        <Head>
          <script dangerouslySetInnerHTML={{__html: `
            var secure = "//local-www.hjjkashdkjfh.com";
            var perfConfig = {
              LOCALE: '${language}_${country}',

Я хочу подтвердить с помощью теста, что perfConfig построен правильно. Я проверяю это с:

import React from 'react';
import Enzyme from 'enzyme';
import Foo from '../../components/Foo';
import Adapter from 'enzyme-adapter-react-16';
import enzymify from 'expect-enzyme';
import Head from 'next/head';

const {mount, shallow, render} = Enzyme;
Enzyme.configure({adapter: new Adapter()});
expect.extend(enzymify());

...

  it('renders correct nsgConfig', () => {
    const foo = render(<Foo country='ca' language='fr'/>);
    console.dir(foo.html());
    expect(foo.find('Head')).toExist();
    expect(foo.html().indexOf("LOCALE: 'fr_ca'")).toBeGreaterThan(0);
  });

Проблема в том, что HTML не содержит заголовка. HTML имеет div, но это все.

Как мне заставить Next/Enzyme работать здесь, чтобы отобразить всю страницу? Пробовал неглубоко и монтировать без удачи.

Источник

2 ответа

Компонент Head добавляет свои дочерние элементы к фактическим после монтирования страницы. Вы должны визуализировать всю страницу, начиная с компонента _document. В моих тестах монтирование, кажется, использует тег "div", куда он вставляет компонент и жалуется, если вы действительно монтируете компонент "head", поэтому я не уверен, что это даже возможно.

Источник

Ответ здесь, я думаю, заключается в том, что компонент не будет отображать полный HTML, потому что он на самом деле не смонтирован на странице. Подтвержду позже.

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