2017-09-26 8 views
0

私は、redux-form状態のフィールドの現在の値に依存するLabelを持つコンポーネントDemoを持っています。私はフォームの状態から "param"フィールドの現在の値を取得するためにformValueSelectorを使用しています。それはうまく動作します。ただし、npm testを実行しているときは、セレクタ関数は常にundefinedを返します。どうすればそれを嘲笑できますか?Redux-Form:JestでformValueSelectorをモックする方法

私が間違った方法でこれを行っている場合はお知らせください。

私は

class Sample extends React.Component { 
render() { 
    const {param, state} = this.props; 
    const selector = formValueSelector('sampleform'); 
    return (
     <div> 
      <Demo 
       name="name" 
       label={selector(state, `${param}`)} 
      /> 
     </div> 
    ); 
} 

} 輸出デフォルトのサンプルのようなコンポーネントを持っています。

と、テストコードは、セレクタが期待する状態に適しモックとformValueSelectorを提供していない

function setup() { 
    const spy = jest.fn(); 
    const store = createStore(() => ({})); 
    const Decorated = reduxForm({ form: 'sampleform' })(Sample); 

    const props = { 
     "param":"keyOfState", 
     "state":{"keyOfState":"Label"} 
    } 
    const mockedComponent = <Provider store={store}> 
     <MuiThemeProvider muiTheme={MuiStyles()}> 
      <Decorated {...props}> 
       <span></span> 
      </Decorated> 
     </MuiThemeProvider> 
    </Provider>; 
    return { 
     props, 
     mockedComponent} 
} 
describe('Sample Component',() => { 
    it('should render the snapshot',() => { 
     const { mockedComponent } = setup() 
     const tree = renderer.create(
      mockedComponent 
     ).toJSON(); 
     expect(tree).toMatchSnapshot(); 
    }); 
}); 

答えて

1

ようなものです。

解決策:セレクタはreduxによって提供されるグローバル状態オブジェクトを期待しています。現在の嘲笑された状態はこれを反映していません。形状予想の修正問題にモックを変更する:

それはこの形状である:

{ 
    form: { 
    sampleform: { 
     values: { 
     keyOfState: "Label" 
     } 
    } 
    } 
} 

注:sampleformキーに格納されたオブジェクトは、より多くのエントリが含まれていますが、彼らは模擬のために無関係です。ここで

はあなたの問題を解決する生殖へのリンクです:https://github.com/mjsisley/reduxFormMockIssue

ご注意:私はマット・ロウによりここに指示されました。私は他の多くのプロジェクトで彼と一緒に働いている開発者です。

関連する問題