React＆Jest testing：Reduxに接続されたネストされたコンポーネントは不変の違反エラーを返します

Question

Jestでいくつかのテストを行うためにインポートするコンポーネントがあります。

他の構成要素は次のように定義される

class MyComponent extends Component { 
    render() { 
    return (
     <div> 
     <OtherComponent /> 
     </div> 
    ); 
    } 
} 

export { MyComponent }; 

次のように私のテストである

class OtherComponent extends Component { ... } 
export default connect(...)(OtherComponent); 

：

import React from 'react'; 
import { shallow } from 'enzyme'; 

import { MyComponent } from '../../components/MyComponent'; 
// ... 

MyComponentの内部OtherComponentがあることだけ事実、それは、Reduxのに接続されていますconnectを使用すると、テストファイルの上記のインポートが失敗します。

不変の違反：_registerComponent（...）：ターゲットコンテナはDOM要素ではありません。

at invariant (node_modules/fbjs/lib/invariant.js:44:15) 
    at Object._renderNewRootComponent (node_modules/react-dom/lib/ReactMount.js:311:76) 
    at Object._renderSubtreeIntoContainer (node_modules/react-dom/lib/ReactMount.js:401:32) 
    at Object.render (node_modules/react-dom/lib/ReactMount.js:422:23) 
    at Object.<anonymous> (my-app-directory/index.js:30:46) 
    at Object.<anonymous> (my-app-directory/components/OtherComponent.js:x:xx) 
    at Object.<anonymous> (my-app-directory/components/MyComponent.js:x:xx) 
    at Object.<anonymous> (my-app-directory/test/components/MyComponent.test.js:x:xx) 
    at handle (node_modules/worker-farm/lib/child/index.js:41:8) 
    at process.<anonymous> (node_modules/worker-farm/lib/child/index.js:47:3) 
    at emitTwo (events.js:106:13) 
    at process.emit (events.js:191:7) 
    at process.nextTick (internal/child_process.js:744:12) 
    at _combinedTickCallback (internal/process/next_tick.js:67:7) 
    at process._tickCallback (internal/process/next_tick.js:98:9) 

ネストされたコンポーネントが再来に接続されている場合は、どのように私は私のコンポーネントをテストすることができますか？ O_O」

更新：

私は私のメインのアプリケーションファイルから反応し、ルータからの歴史をインポートして、index.js、とは私のOtherComponentの方法のいずれかの内側に新しいルートをプッシュすることと呼ばれます。それが問題の原因だったようだ。だから私は私のコンポーネント内で履歴を使用すべきではないと思いますか？私がそのように保つことを選んだのであれば、私はそれを私のテストでどうやって扱うだろうか？

import { history } from '../'; // index.js file with ReactDOM injection 

class OtherComponent extends Component { 
    // ... 
    someMethod() { 
    callSomeActionCreator(); 
    history.push('/some/route'); 
    } 
} 

Answer 1

単体テストの1つの方法は、実際のコンポーネントにのみ焦点を合わせ、その動作をテストすることです。これを行うには、他のすべての依存関係を模倣する必要があります。あなたの場合、OtherComponentを模倣して、正しいパラメータで簡単に使用できるかどうかテストするだけです。

import React from 'react'; 
import { shallow } from 'enzyme'; 
import { MyComponent } from '../../components/MyComponent'; 

jest.mock('../../OtherComponent',() => 'OtherComponent')//note that the path is relative to your test files 

これは名前OtherComponentとの単純なコンポーネントでOtherComponentに置き換えられます。

Answer 2

不変の違反のエラーは、react-reduxでのテストでは一意ではありません。むしろ、テストスイートは、DOMにマウントする方法が提供されていないと失敗します（DOMにない要素に.renderを呼び出そうとした場合、ReactDOMは失敗します）。

@Andreasが言ったことをエコーオフする - jest.mockを使用して、テストのセットアップ中にReactDOMを初期化することができます。あなたの更新に関して

import Timer from './Timer'; 
import { store } from './store'; 

jest.mock("./index.js",() => "root"); 

describe('Timer test: ',() => { 
    it('should render',() => { 
    const wrapper = <Timer store={store} /> 
    expect(wrapper); 
    }); 
}); 

：その後、特にreact-reduxのために、あなたは小道具としてテストしたコンポーネントにstoreを渡すことができリアクトルーターアプリhere.のナビゲーション関連の側面をテストする方法の良い例を提供しますjest.mockに追加できるパラメータも便利です。