Soy nuevo en reactjs e intento escribir una prueba unitaria para una función simple. Estoy usando enzima y aquí está mi prueba:

import React from 'react';
import { shallow } from 'enzyme';
import {P} from "../../src/app/components/T";
import ToDoItem from "../../src/app/components/ToDoItem";

function mockItem(overrides) {
  // … create mock ToDo Item
}

describe('<P />', () => {
  it('renders without exploding', () => {
    const wrapper = shallow(<P attach={ true } />);
    expect(wrapper.length).toEqual(1);
  });
});

Y aquí está mi componente:

import  React from "react";

export class T extends  React.Component{
  render() {
    return (
    <div>
        <div className="row panel">
            <div className="col-sm-12 header">uuuuu</div>
        </div>
    </div>
    );
  }
}

Pero cuando lo ejecuto me sale el siguiente error:

<P /> renders without exploding:
 TypeError: Cannot read property 'contextTypes' of undefined
  at ShallowComponentWrapper._maskContext (node_modules\react-dom\lib\ReactCompositeComponent.js:461:33)
  at ShallowComponentWrapper._processContext (node_modules\react-dom\lib\ReactCompositeComponent.js:481:30)
  at ShallowComponentWrapper.mountComponent (node_modules\react-dom\lib\ReactCompositeComponent.js:180:30)
  at Object.mountComponent (node_modules\react-dom\lib\ReactReconciler.js:46:35)
  at ReactShallowRenderer._render (node_modules\react-dom\lib\ReactShallowRenderer.js:126:23)
  at _batchedRender (node_modules\react-dom\lib\ReactShallowRenderer.js:79:12)
  at Object.batchedUpdates (node_modules\react-dom\lib\ReactDefaultBatchingStrategy.js:60:14)
  at Object.batchedUpdates (node_modules\react-dom\lib\ReactUpdates.js:97:27)
  at ReactShallowRenderer.render (node_modules\react-dom\lib\ReactShallowRenderer.js:106:18)
  at ReactShallowRenderer.render (node_modules\enzyme\build\react-compat.js:158:39)
  at node_modules\enzyme\build\ShallowWrapper.js:90:26
  at ReactDefaultBatchingStrategyTransaction.perform (node_modules\react-dom\lib\Transaction.js:140:20)
  at Object.batchedUpdates (node_modules\react-dom\lib\ReactDefaultBatchingStrategy.js:62:26)
  at batchedUpdates (node_modules\react-dom\lib\ReactUpdates.js:97:27)
  at node_modules\enzyme\build\ShallowWrapper.js:89:41
  at withSetStateAllowed (node_modules\enzyme\build\Utils.js:224:3)
  at new ShallowWrapper (node_modules\enzyme\build\ShallowWrapper.js:88:38)
  at shallow (node_modules\enzyme\build\shallow.js:19:10)
  at Context.<anonymous> (C:/tj/reactjs-basics/test/components/test.js:16:25)

No sé si me falta alguna biblioteca o si estoy haciendo algo en mi código. ¿Alguien puede ayudar?

2
Hamed Minaee 14 dic. 2016 a las 06:18

2 respuestas

La mejor respuesta

Está importando el componente P de forma incorrecta. Por lo tanto, si

export class T extends  React.Component{}

Entonces la importación debería ser

import { T } from "../../src/app/components/T";
...
shallow(<T attach={ true } />);

Eche un vistazo a este article te será útil.

HTH

2
The Reason 14 dic. 2016 a las 12:37

No estoy seguro de lo que intentas hacer con la línea

const wrapper = shallow(<P/>, { attach: true });

Pero según la documentación de Enzymes (http://airbnb.io/enzyme/docs/api/shallow .html) el segundo argumento de superficial debe ser un objeto con un contexto para pasar al componente.

Si, en cambio, está tratando de pasar eso como un accesorio a su componente, debe escribir la declaración superficial como esta:

const wrapper = shallow(<P attach={ true } />);
0
Ben Hare 14 dic. 2016 a las 03:56