非常に単純なコンポーネントをテストしようとするとcontextTypesエラーが発生します

Question

私はreactjsを初めて使用し、単純な関数の単体テストを作成しようとしています。 私は、酵素を使用して、ここで私のテストで午前：私は

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

：

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

しかし、私はそれを実行したときに、私は次のエラーを取得します私がライブラリを紛失しているかどうか、私がコード内で何かをしているかどうかは分かりません。誰も助けることができますか？

Answer 1

あなた

場合は、間違ったway.Soで P部品を輸入しています

export class T extends React.Component{} 

次にインポートが

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

THIを見てみましょうする必要がありますあなたのために役に立つでしょう。article

HTH

Answer 2

私はあなたがライン

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

をどうしようとしているのかわからないんだけど酵素あたりのドキュメント（http://airbnb.io/enzyme/docs/api/shallow.html）浅いへの第2引数はに伝承するためのコンテキストを持つオブジェクトでなければなりません成分。

あなたの代わりに、コンポーネントの小道具として、あなたはこのような浅い宣言を記述する必要があることを渡そうとしている場合：

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