我开始测试React Redux React-router应用程序,我一直在努力进行一些基本的测试 .
这是我的组件(company-view.js):
import React, { Component } from 'react';
import { Redirect } from 'react-router-dom';
import {withCookies} from 'react-cookie';
import CompanyShow from '../components/company-show';
const styles = {
pageContainer: {
padding: '0px 25px'
}
}
class CompanyView extends Component {
render() {
if (this.props.cookies.get('user').position !== 'Gerente Innovación') {
return <Redirect to='/forbidden'/>;
}
return (
<div style={styles.pageContainer}>
<h3>Mi Empresa</h3>
<CompanyShow />
</div>
);
}
}
export default withCookies(CompanyView);
这是我的测试文件(company-view.test.js):
import React from 'react';
import ReactDOM from 'react-dom';
import CompanyView from '../company-view';
import { Cookies } from 'react-cookie';
import { MemoryRouter} from 'react-router';
it('should redirect to forbidden if not \'Gerente de Innovación\'', () => {
let cookies = new Cookies()
cookies.set('user', {position: 'Not \'Gerente de Innovación\''}, { path: '/' });
const context = {
cookies: cookies
}
const wrapper = mount( <MemoryRouter><CompanyView /> </MemoryRouter>, {context});
expect(wrapper).toMatchSnapshot();
});
问题是此测试失败并出现以下错误:
不变违规:A可能只有一个子元素
它还说:
console.error node_modules / react-dom / cjs / react-dom.development.js:9747组件中出现上述错误:在WrapperComponent的MemoryRouter(由WrapperComponent创建)中的Router(由MemoryRouter创建)中
Consider adding an error boundary to your tree to customize error handling behavior.
我正在使用react 16.0.0,react-dom 16.0.0,react-router 4.2.0和react-router-dom 4.2.2
我使用create-react-app创建了应用程序, Headers 显示我正在使用Jest Enzyme进行测试 .
在此先感谢,如果您需要任何其他信息,请告诉我们!