エラー：不変違反：findAllInRenderedTree（...）：インスタンスがコンポジットコンポーネントである必要があります

Question

JESTでReactファイルのテストケースを記述する際に、このエラーが発生しています。以下は、私のサンプルコードです：

search_basr_test.js

jest.autoMockOff(); 
global.React = require('react/addons'); 
jest.setMock('../stores/browser_store.jsx'); 
beforeEach(function() { 
    var search_bar = require('../components/search_bar.jsx'); 
}); 
var TestUtils = React.addons.TestUtils; 

describe("Test", function() { 
    it("should render Test", function() { 
      var test = TestUtils.renderIntoDocument(<search_bar/>); 
      expect(test).toBeDefined(); 
    }); 
    it("renders a list in a box with proper CSS classes", function() { 
      var test = TestUtils.renderIntoDocument(<search_bar/>); 
      let box = TestUtils.findRenderedDOMComponentWithTag(test, "div"); 
      expect(box.className).toEqual("sidebar__collapse"); 
    }); 
}); 

search_bar.jsx

return (
     <div> 
      <div 
       className='sidebar__collapse' 
       onClick={this.handleClose} 
      > 
       <span className='fa fa-angle-left'></span> 
      </div> 
      <span 
       className='search__clear' 
       onClick={this.clearFocus} 
      > 
       {'Cancel'} 
      </span> 
} 

これからの私を助けるためにそこに誰も？

Answer 1

コンポジットコンポーネントは、リアクトコンポーネント（div、span、...以外）を含むコンポーネントです。 メソッド 'findRenderedDOMComponentWithTag'は、複合コンポーネントをパラメータとして取り込みます。

することは、複合1

Answer 2

ではありませんので、これは遅れているが、私はちょうどこのに走った、と私は見つかっていない（jqueryの、JS、...）あなたのケースで直接部品を解析してみてくださいそれに対する素晴らしい答え。

私のソリューションは、テストファイルに

import { Component } from "react"; 
class Wrapper extends Component { 
    render() { 
    return <YourComponent {...this.props} /> 
    } 
} 

をラッパーコンポーネントを作ることだったし、代わりに、これはあなたのコンポーネントがあることを保証行うコール

TestUtils.renderIntoDocument(
    <Wrapper /> 
); 

を

TestUtils.renderIntoDocument(
    <YourComponent /> 
); 

を呼び出しますステートレス関数ではありません。

これは将来誰にでも役立ちます。