reactjs - 冗談スナップショットテストはネストReduxの「接続」コンポーネント

Question

スナップ試験（冗談スナップショット）Reduxのストアに接続されている成分Iは、In

// User.js 

/* ... */ 

export class User extends React.Component {/* ... */} 

/* ... */ 

export default connect(mapStateToProps)(User); 

連結成分に加えて、実際のコンポーネントをエクスポートすることができテストファイル私は実際のコンポーネント（接続されているバージョンではない）をインポートし、スナップショットテストを実行できます。

// User.spec.js 

import { User } from './User'; 

/* ... toMatchSnapshot() testing */ 

しかし、私は接続されたコンポーネントが別の接続されたコンポーネントの中にネストされていると問題にぶつかります。たとえば、のは、Userコンポーネントが別の連結成分内にネストされたとしましょう - Wrapper上のスナップショットのテストを実行する場合

// Wrapper.js 

import User from './User'; // importing the connected version 

/* ... */ 

export class Wrapper extends React.Component { 

    /* ... */ 

    render() { 
    return (
     <div> 
     /* ... */ 
     <User /> 
     </div> 
    ); 
    } 
} 

export default connect(mapStateToProps)(Wrapper); 

私はUserにやったのと同じ方法で私に次のエラーを与える：

Invariant Violation: Could not find "store" in either the context or props of "Connect(User)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(User)".` 

は、任意のはありますスナップショット作成時に浅くレンダリングする方法？または私は何か間違っているのですか？

Answer 1

この場合の最善の方法は、ただこれは名前Userを持つ単純なコンポーネントでUserを置き換えますUser

import Wrapper from './Wrapper' 

jest.mock('./User',() => 'User') // note that the path to user is relative the test file not to the Wrapper.js file. 

をあざけることにより、独自にWrapperをテストすることです。