reactjs - 尝试在 ReactJs 中测试组件时出现这些错误

Question

我正在尝试测试一些组件，但我做不到。它在 mount() 和 shallow() 上给我一个错误:

TypeError: Cannot read property 'parentNode' of undefined

我正在使用 react-router-dom 进行路由。

这是所有组件。

render-component.jsx(最高组件):

import React, { Component } from 'react';
import HeaderSection from './header-section';
import BodySection from './body-section';
import FooterSection from './footer-section';
import Footer from '../footer';
import NavBar from '../nav-bar';
import { withRouter } from 'react-router';

class RenderComponent extends Component {
    state = {
        showLogin: false
    }

    getHomeFooterName = () => {
        if (this.props.location.pathname === '/') return 'our-footer';
        return 'footeri'
    }

    render() {

        return (
            <React.Fragment>
                <NavBar />
                {this.props.children.find(component => component.type === HeaderSection)}
                <section className="content">
                    {this.props.children.find(component => component.type === BodySection)}
                </section>
                <section name={this.getHomeFooterName()} id="footer" >
                    {this.props.children.find(component => component.type === FooterSection)}
                    <Footer />
                </section>
            </React.Fragment>
        );
    }
}

export default withRouter(RenderComponent);

header-section.jsx、body-section.jsx 和 footer-section.jsx 是一样的，它们只是渲染 child :

import React from 'react';

const BodySection = ({ children }) => {
    return (
        <React.Fragment>
            {children}
        </React.Fragment>
    );
}

export default BodySection;

这是我调用这些组件的 home.jsx:

import React, { Component } from 'react';
import CoreValues from './core-values';
import History from './history'
import News from './news';
import Subscribe from './subscribe';
import HeaderSection from '../sections/header-section';
import BodySection from '../sections/body-section';
import FooterSection from '../sections/footer-section';
import RenderComponent from '../sections/render-component';
import MetaTags from 'react-meta-tags';
import { withRouter } from 'react-router';

class Home extends Component {
    state = {};

    goToElement = props => {
        //some us of this.props.location and this.props.history
    }

    render() {
        return (
            <RenderComponent isHomePage={true}>
                <HeaderSection>
                    <MetaTags>
                        <title>Super Viva</title>
                    </MetaTags>
                </HeaderSection>

                <BodySection>
                    <CoreValues />
                    <History />
                    <News />
                </BodySection>

                <FooterSection>
                    <Subscribe />
                </FooterSection>
            </RenderComponent>
        );
    }
}

export default withRouter(Home);

我正在尝试测试此 home.jsx 是否成功呈现 CoreValues、History、News、Subscribe 甚至 RenderComponent、HeaderSection、BodySection 和 FooterSection，以及一些里面的其他 child 。

下面是我的 home.test.js，其中包含我尝试测试其呈现 Header 的所有选项。就像你知道的那样，我正在使用 home.find().dive()，因为我需要它们来渲染，所以我不必为它们显式地编写测试来使代码覆盖率。

我也用过 react-router-test-context 但它似乎不起作用。

home.test.js

import React from 'react';
import { mount, shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import createRouterContext from 'react-router-test-context';
import Home from './home';
import Header from './header';
import { BrowserRouter, MemoryRouter } from 'react-router-dom';


configure({ adapter: new Adapter() });
const context = createRouterContext();

describe('<Home />', () => {
    it('should render <Header />', async () => {
        const home = shallow(<Home />, { context });
        expect(home.find(Header).dive()).toHaveLength(1); //Method “dive” is meant to be run on 1 node. 0 found instead.
    });

    it('should render <Header /> 1', async () => {
        const home = mount(<Home />, { context }); //Invariant Violation: You should not use <Route> or withRouter() outside a <Router>
        expect(home.find(Header).dive()).toHaveLength(1);
    });

    it('should render <Header /> 2', async () => {
        const home = shallow(<BrowserRouter><Home /></BrowserRouter>);
        expect(home.find(Header).dive()).toHaveLength(1); //Method “dive” is meant to be run on 1 node. 0 found instead.
    });

    it('should render <Header /> 3', async () => {
        const home = shallow(<MemoryRouter><Home /></MemoryRouter>);
        expect(home.find(Header).dive()).toHaveLength(1); //Method “dive” is meant to be run on 1 node. 0 found instead.
    });
})

这是我得到的所有错误:

Method “dive” is meant to be run on 1 node. 0 found instead

Invariant Violation: You should not use or withRouter() outside a

而在另一个测试文件中，组件不是用 withRouter(Component) 包装的，比如 withRouter(Home)，我得到这个错误:

TypeError: Cannot read property 'parentNode' of undefined

Answer 1

浅安装不会呈现子组件(在您的情况下为页眉、主体、页脚)。它只会渲染“RenderComponent”。您是否尝试过使用 mount 并用 BrowserRouter 包装它？

基本上类似于您的第三个测试示例(“应该渲染 2”)，但改用 mount。