Javascript 将React/Enzyme/Jest与Nextjs一起使用时,是否可以获得完整的html页面?
我有一个反应组件,看起来像:Javascript 将React/Enzyme/Jest与Nextjs一起使用时,是否可以获得完整的html页面?,javascript,reactjs,jestjs,enzyme,next.js,Javascript,Reactjs,Jestjs,Enzyme,Next.js,我有一个反应组件,看起来像: 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.languag
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}',
问题是html不包含头标记。html有div,但仅此而已
我如何让Next/Enzyme在这里协同工作以呈现整个页面?尝试浅浅和上山没有运气 我认为,这里的答案是,该组件不会呈现完整的html,因为它实际上没有装入页面中。稍后将进行确认。安装页面后,头部组件将其子项添加到实际值中。您必须从_document组件开始呈现整个页面。在我的测试中,mount似乎使用了一个“div”标记,它在其中插入组件,并抱怨您是否真的安装了一个“head”组件,所以我不确定这是否可行
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);
});