我开始测试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进行测试 .

在此先感谢,如果您需要任何其他信息,请告诉我们!