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相同，它们只是呈现子级：

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个代替

不变违反：您不应在
之外使用或与Router（）一起使用

在另一个测试文件中，该组件的组件没有像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文档以获得清晰的信息

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

2 个答案: