this.varが渡されている子コンポーネントのjestテストは、これが未定義のため失敗します

Question

親コンポーネントに子コンポーネントが含まれているかどうかをテストしようとしています。次

Parent.js

constructor(props) { 
    super(props); 
    this.handleChange = this.handleChange.bind(this); 
} 
handleChange(e){ 
    ... 
}  

<Parent> 
    <Child onChange={this.handleChange} /> 
</Parent> 

親-test.js

... 
container = shallow(<Parent />) 
expect(container.contains(<Child onChange={this.handleChange} />)).toBe(true); 
... 

この意志が生成する：属性は、このVAR、以下のコードでのようなnameが含まれていない限り、すべてが良いですエラーメッセージ。これは定義されていないことを示します。

TypeError: Cannot read property 'name' of undefined

私の目標はテストを行うことですtは、適切なプロパティを持つ子コンポーネントが存在することを示します。私はコンポーネント自体をテストしたくない。

は

Answer 1

thisはあなたが実行しているテストのコンテキストで定義されていない[例を明確にするために編集しました]。たとえば、Parentを作成するときにpropとして渡すと、その値がテストで具体的に確認できます。

また、あなたのParentコンポーネントは、変数を使用していない文字通りthis.nameにChildの名前を初期化しています。変数に値を代入する場合は、name={this.name}のような操作を行う必要があります。

this.nameの代わりにpropsを使用することをお勧めします。