将 React/Enzyme/Jest 与 Nextjs 一起使用时是不是可以获得整页 html？

Posted 2023-02-22

技术标签:

【中文标题】将 React/Enzyme/Jest 与 Nextjs 一起使用时是不是可以获得整页 html？【英文标题】：Is it possible to get the full page html when using React/Enzyme/Jest with Nextjs?将 React/Enzyme/Jest 与 Nextjs 一起使用时是否可以获得整页 html？ 【发布时间】：2018-08-31 07:37:02 【问题描述】：

我有一个看起来像这样的 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 不包含 head 标签。 html 有 div，但仅此而已。

如何让 Next/Enzyme 在这里协同工作以呈现整个页面？尝试过浅和安装，但没有运气。

【问题讨论】：

【参考方案1】：

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

【讨论】：

【参考方案2】：

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

【讨论】：

以上是关于将 React/Enzyme/Jest 与 Nextjs 一起使用时是不是可以获得整页 html？的主要内容，如果未能解决你的问题，请参考以下文章

vivo与百度识图联手：旗舰新机 vivo NEX内置AI图像识别能力

HDU - 4763 Theme Section(kmp)