2017-09-26 48 views
0

我有一个组件Demo,其标签依赖于redux-form状态中字段的当前值。我正在使用formValueSelector从窗体状态获取当前值“param”字段。它工作正常。但是,在运行npm测试时,选择器函数总是返回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> 
    ); 
} 

} 出口默认样品的成分;

,并测试代码是一样

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

您没有提供formValueSelector与该选择期望状态的充分模拟。

解决方案:选择器需要由redux提供的全局状态对象。目前的嘲弄状态并未反映这一点。更改模拟预期的形状修复该问题:

正是这种形状:

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

注意事项:储存在sampleform键的对象包括多个条目,但他们无关的模拟。

这里是一个解决您的问题再现的链接:https://github.com/mjsisley/reduxFormMockIssue

请注意:我是由Matt罗威在这里执导。我是与他一起在其他项目上合作过的开发人员。

相关问题