Reactjs Redux表单：如何在Jest中模拟formValueSelector

我有一个组件演示，其标签取决于redux表单状态中字段的当前值。我使用formValueSelector从表单状态获取“param”字段的当前值。它很好用。但是，在运行npm测试时，选择器函数始终返回undefined。我怎么能嘲笑它

请让我知道，如果我这样做是在一个错误的方式

我有一个像

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>
    );
}

类示例扩展了React.Component{
render（）{
const{param，state}=this.props；
常量选择器=formValueSelector（'sampleform'）；
返回(
);
}

} 导出默认样本

测试代码就像

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();
    });
});

函数设置（）{
const spy=jest.fn（）；
conststore=createStore（（）=>（{}））；
const=reduxForm（{form:'sampleform'}）（Sample）；
常量道具={
“参数”：“keyOfState”，
“状态”：{“keyOfState”：“标签”}
}
常量mockedComponent=
;
返回{
道具，
mockedComponent}
}
描述（'样本组件'，（）=>{
它（'应该呈现快照'，（）=>{
const{mockedComponent}=setup（）
const tree=renderer.create(
模拟组件
).toJSON（）；
expect（tree.toMatchSnapshot（）；
});
});

您没有为formValueSelector提供足够的模拟，以满足选择器期望的状态

解决方案：选择器需要redux提供的全局状态对象。当前模拟状态不反映这一点。将模拟更改为预期的形状可修复此问题：

它的形状是这样的：

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

注意：存储在sampleform键上的对象包含更多的条目，但它们与mock无关

以下是解决您问题的复制品链接：

---

请注意：我是由马特·洛导演的。我是与他合作过许多其他项目的开发人员。

您没有为formValueSelector提供足够的模拟，以满足选择器所期望的状态

解决方案：选择器需要redux提供的全局状态对象。当前模拟状态不反映这一点。将模拟更改为预期的形状可修复此问题：

它的形状是这样的：

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

注意：存储在sampleform键上的对象包含更多的条目，但它们与mock无关

以下是解决您问题的复制品链接：

---

请注意：我是由马特·洛导演的。我是与他合作过许多其他项目的开发人员。

对于未来的任何人-如果出于某种原因您确实需要模拟FormValueSelector，我只是从我的帮助模块导出了一个包装：

export const tableTypeSelector = formValueSelector('toggle')

然后嘲笑说：

import * as Helpers from 'helpers'
...
stub = sinon.stub(Helpers, 'tableTypeSelector').returns('charges')

---

对于将来的任何人-如果出于某种原因您确实需要模拟FormValueSelector，我刚刚从我的Helpers模块导出了它的包装：

export const tableTypeSelector = formValueSelector('toggle')

然后嘲笑说：

import * as Helpers from 'helpers'
...
stub = sinon.stub(Helpers, 'tableTypeSelector').returns('charges')

---

redux表单是否提供任何util函数来生成具有所需值的redux状态的形状？i、 类似mockFormState（{field:value}）的东西redux表单是否提供了任何util函数来生成具有所需值的这种形状的redux状态？i、 类似mockFormState（{field:value}）的东西