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

Question

我有一个组件Demo，它的Label依赖于redux-form状态下某个字段的当前值。我正在使用 formValueSelector 从表单状态获取 "param" 字段的当前值。它工作正常。但是，虽然运行 npm test，选择器函数始终 returns 未定义。我该如何模拟它？

如果我这样做有误，请告诉我。

我有一个类似的组件

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

Answer 1

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

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

是这个形状：

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

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

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

请注意：我是由 Matt Lowe 指导的。我是开发者，曾与他合作过许多其他项目。

Answer 2

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

export const tableTypeSelector = formValueSelector('toggle')

然后嘲笑说：

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

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

Redux-Form : How to mock formValueSelector in Jest

reactjs

jestjs

redux-form

spy

react-redux-form