Redux-Form：如何在 Jest 中模拟 formValueSelector答案

【问题标题】：Redux-Form : How to mock formValueSelector in JestRedux-Form：如何在 Jest 中模拟 formValueSelector
【发布时间】：2017-09-26 18:21:21
【问题描述】：

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

} 导出默认样本；

而且，测试代码就像

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

【问题讨论】：

标签： reactjs jestjs redux-form spy react-redux-form

【解决方案1】：

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

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

它是这个形状的：

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

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

这是解决您的问题的复制链接：https://github.com/mjsisley/reduxFormMockIssue

请注意：我是由 Matt Lowe 执导的。我是与他合作过许多其他项目的开发人员。

【讨论】：

redux-form 是否提供任何 util 函数来生成这种具有所需值的 redux 状态形状？即类似 mockFormState({ field: value })

【解决方案2】：

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

export const tableTypeSelector = formValueSelector('toggle')

然后嘲笑：

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

【讨论】：