Я получаю ошибку contextTypes, когда пытаюсь протестировать очень простой компонент.

Question

Я новичок в реакции и пытаюсь написать единичный тест для простой функции. Я использую фермент и вот мой тест:

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); 
    }); 
}); 

и вот мой компонент:

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> 
    ); 
    } 
} 

Но когда я запускаю его я получаю следующее сообщение об ошибке:

<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) 

I не знаю, не хватает ли я какой-либо библиотеки или если я что-то делаю в своем коде. Может ли кто-нибудь помочь?

Answer 1

Вы импортируете P компонент в неправильном way.So если вы

export class T extends React.Component{} 

Тогда импорт должен быть

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

Посмотрите на Thi s article он будет вам полезен.

НТН

Answer 2

Я не уверен, что вы пытаетесь сделать с линией

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

, но в документации Ферменты (http://airbnb.io/enzyme/docs/api/shallow.html) второй аргумент отмели должен быть объект с контекстом, чтобы передать на компонент.

Если вы вместо того, чтобы пытаться передать, что в качестве опоры в компонент, вы должны написать неглубокую декларацию, как это:

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