Question

我开始测试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 组件中出现上述错误：在路由器中（由MemoryRouter创建）在MemoryRouter中（由WrapperComponent创建）在WrapperComponent

中

  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创建了应用程序，标题显示我正在使用Jest + Enzyme进行测试。

提前致谢，如果您需要任何其他信息，请告诉我们！

不变违规：<router>在测试时可能只有一个子元素（Jest + Enzyme）

0 个答案: