Я пытаюсь протестировать некоторые компоненты, но не могу.Это выдает ошибку на 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.
});
})
Вот все ошибки, которые я получаю:
Метод «погружение »предназначен для запуска на 1 узле.Вместо этого найдено 0
Инвариантное нарушение: Вы не должны использовать или withRouter () вне
, находясь в другом тестовом файле, где Component не является оберткой с withRouter(Component), например withRouter(Home),я получаю эту ошибку:
TypeError: Невозможно прочитать свойство 'parentNode' из неопределенного