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

Question

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

TypeError: 无法读取未定义的属性“parentNode”

我正在使用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 是一样的，只是渲染childrens：

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 and FooterSection，以及里面的其他一些孩子。

下面是我的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.
    });
})

这是我得到的所有错误：

方法“dive”意味着在 1 个节点上运行。找到了 0 个

Invariant Violation：您不应该在

之外使用 or withRouter()

在另一个测试文件中，组件不是 withRouter(Component) 的包装器，如 withRouter(Home)，我收到此错误：

TypeError: 无法读取未定义的属性“parentNode”

Answer 1

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

基本上像您的第三个测试示例（“应该渲染 2”），但使用 mount 代替。

Answer 2

要测试包含withRouter 的组件，您可以简单地使用WrappedComponent 来获取用withRouter 包装的组件

const Wrapper = shallow(<UserComponent.WrappedComponent />)

您可以参考react-router docs 以获得明确的信息