テスト酵素

Question

で構成Reactjs成分Iは、組成物を通じて、特殊なコンポーネントを作成するように反応するドキュメントのアドバイスに従っ：

import React from 'react'; 
import AlertPanel from './AlertPanel'; 

export default class SpecialAlertPanel extends React.Component { 

    constructor(props) { 
     super(props); 
    } 

    render() { 
     return (
      <AlertPanel text="special" /> 
     ) ; 
    } 
} 

AlertPanelが通過テストを持っている

export default class AlertPanel extends React.Component { 

    constructor(props) { 
     super(props); 
    } 

    render() { 
       textRows = <div>{this.props.text}</div>; 
      } 

      return (
       <Alert bsStyle={this.props.style} onDismiss={this.props.onDismiss}> 
        {textRows} 
       </Alert> 
      ); 
    } 

...と... ：

it('should render AlertPanel to a div', function() { 
    const wrapper = shallow(<AlertPanel />); 
    expect(wrapper.type()).to.eql('div'); 
}); 

私は同等のテストがSpecialAlertPanel：

it('should render SpecialAlertPanel to a div', function() { 
    const wrapper = shallow(<SpecialAlertPanel />); 
    expect(wrapper.type()).to.eql('div'); 
}); 

しかし、このテストは失敗します。

expected [Function: AlertPanel] to deeply equal 'div' 

は私のテストや故障で私のコードですか？ https://github.com/airbnb/enzyme/blob/master/docs/api/ShallowWrapper/type.mdから

Answer 1

あなたが浅いレンダリングSpecialAlertPanelがAlertPanelまでレンダリングではなく（http://airbnb.io/enzyme/docs/api/ShallowWrapper/shallow.html）「深い」されないので

ほとんどの場合、あなたが少し@Igorに異なるとRemLampaの正解@

it('should render SpecialAlertPanel to a div', function() { 
    const wrapper = shallow(<SpecialAlertPanel />); 
    expect(wrapper.find(AlertPanel).shallow().type()).to.eql('div'); 
}); 

Answer 2

：それはコンポジット、コンポーネントの場合は

することは、これは、コンポーネントのコンストラクタになります。

したがってSpecialAlertPanelのラッパータイプはAlertPanelです。

テストをパスする場合は、divにAlertPanelを入れてください。

Answer 3

ようなものが必要。それに関する別の見解は - あなたは何をテストするべきですSpecialAlertPanel？

あなたが示した例では、AlertPanelコンポーネントがあり、テストされています。

SpecialAlertPanelさんの唯一の機能は、レンダリングすることですAlertPanel。

SpecialAlertPanel：<div>のテストは、AlertPanelのテストを複製しています。

SpecialAlertPanelがAlertPanelである場合は、テストする必要があります。 AlertPanelがテストに合格し、SpecialAlertPanelがテストに合格してAlertPanelをチェックすると、明示的にテストする必要なしに<div>がレンダリングされていることがわかります。

、