ユニットテストリアクションコンポーネントが自己参照である

Question

React JSXコンポーネントのテストフレームワークにはかなり新しく、コンポーネントが正しくレンダリングされるかどうかをテストするときに1つの問題が発生しました。それはそのrenderメソッドの中にref〜thisを含んでおり、私はそれをどのように単体テストするか（または無視してテストが失敗しないように）考えていません。

チャイをテスト用に使用しています。

これはコンポーネントです：

export default class TopTooltip extends Component { 
    render() { 
    const { ident, title} = this.props; 

    return (
     <Tooltip 
     className={`${className} top-banner-tooltip`} 
     id={ident} 
     ref={this} 
     > 
     foo 
     </Tooltip> 
    ); 
    } 
} 

...と私のユニットテスト：期待通りの参照ではないため

import { expect } from 'chai'; 
import { Tooltip } from 'react-bootstrap'; 
import { shallow } from 'enzyme'; 

describe('TopTooltip',() => { 
    describe('renders',() => { 
    it('all injected values',() => { 
     const t = (<TopTooltip 
     title="tooltip" 
     ident="xyz" 
     className="myClass" 
     />); 

     const comp = shallow(t); 

     expect(comp.find(Tooltip).at(0).node) 
     .to.equalJSX(
     <Tooltip 
      className="myClass top-banner-tooltip" 
      id="xyz" 
      ref={t.this} 
     > 
      <span className="title">tooltip</span> 
      foo 
     </Tooltip> 
    ); 
    }); 
    }); 
}); 

しかし、これは失敗します。

expected ref={[object Object]} 
but got ref={undefined} 

誰もがこの問題で私を助けることができますか？私は、この参照がテスト中に無視されるべきであると指定することでもうまくいっています。

Answer 1

あなたはこのような何か試すことができます。

it('should contain <Tooltip/>',() => { 
    const component = shallow(<TopTooltip/>); 

    expect(component).to.contain(<Tooltip/>); 
}); 


it('should correctly render',() => { 
    const component = shallow(<Tooltip className="myClass"/>); 

    expect(component).to.have.className('myClass'); 
    expect(component).to.contain(<span className="title">tooltip</span>); 
}); 

あなたが正しくインストールされていると仮定すると、チャイ、酵素

import chai, { expect } from 'chai'; 
import chaiEnzyme from 'chai-enzyme'; 

chai.use(chaiEnzyme());