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