Question

我有一个看起来像的反应组件：

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在这里一起工作以呈现整页？浅尝试，没有运气。

Answer 1

我认为答案是，该组件不会呈现完整的html，因为它实际上并未安装在页面中。稍后会确认。

Answer 2

一旦装入页面，Head组件会将其子代添加到实际页面。您必须从_document组件开始呈现整个页面。在我的测试中，mount似乎正在使用“ div”标签，在该标签中插入组件，并抱怨您是否实际安装了“ head”组件，因此我不确定这是否可能。

在Nextjs中使用React / Enzyme / Jest时是否可以获得整页html？

2 个答案: