jeudi 21 mars 2019

Getting these error when trying to test component in ReactJs

I am trying to test some components but I'm not being able to. It's throwing me an error on mount() and shallow():

TypeError: Cannot read property 'parentNode' of undefined

I'm using react-router-dom for routing.

Here's all the components.

render-component.jsx (highest component):

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 and footer-section.jsx are the same, they just render childrens:

import React from 'react';

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

export default BodySection;

Here's my home.jsx where I call these components:

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);

And I'm trying to test that this home.jsx renders successfully CoreValues, History, News, Subscribe and even RenderComponent, HeaderSection, BodySection and FooterSection, and some other childs inside.

Below you have my home.test.js with all the options I tried to test if its rendering Header. Just so you know, I'm using home.find().dive(), because I need them to render so I don't have to write tests for all of them explicitly in order to make code-coverage.

I did also use that react-router-test-context but it doesnt seems to work.

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.
    });
})

Here are all error I get:

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

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

while in another test file where Component its not wrapper with withRouter(Component) like withRouter(Home), i get this error:

TypeError: Cannot read property 'parentNode' of undefined

Aucun commentaire:

Enregistrer un commentaire