从State编写初始表单值的Redux表单的Jest测试时出错

Question

我正在尝试使用Jest为我的React组件编写一个使用Redux-Form的测试。但由于Redux-Form中的Initialize From State功能，我的测试失败了。

以下是我遇到的错误：

＆＃13;

＆＃13;

TypeError: Cannot read property 'entities' of undefined

      90 |     return {
      91 |         initialValues: {
    > 92 |            "id": state.bees.entities.journals[ownProps.journal.id].id,
      93 |            "title": state.bees.entities.journals[ownProps.journal.id].attributes.title,
      94 |            "description": state.bees.entities.journals[ownProps.journal.id].attributes.description,
      95 |         }

＆＃13;

＆＃13;

＆＃13;

我也在使用Redux-Bees，它允许我与我的JSON数据进行互动。

这是我的测试：

＆＃13;

＆＃13;

import React from "react";
import renderer from "react-test-renderer";
import { createStore } from "redux";
import { Provider } from "react-redux";
import EditJournalForm from "./EditJournalForm";
import { reduxForm } from "redux-form";

jest.mock('react-dom')

const spy = jest.fn()
const initialStateValues = {
  "displayForm": false,
  "displayList": true,
  "overlayShouldTrigger": true,
  "initialListItemDetails": {},
  "isEditing": false,
  "journalList": [],
  "journalListDetails": [],
  "searchJournalList": []
}
const Decorated = reduxForm({ 
     form: 'testForm', onSubmit: { spy }
})(EditJournalForm)

const formFieldValues = {
  "attributes": {
    "description": "test description",
    "title": "Test Title"
  },
  "relationships": {
      "initiative": {
          "data": {
              "id": 1,
              "type": "initiatives"
          }
      }
  },
  "type": "journals",
  "id" : 1
}
    

it('EditJournalForm renders correctly', () => {
  const store = createStore((state) => state, initialStateValues)
  const tree = renderer.create(
    <Provider store={store}>
      <Decorated
        {...formFieldValues}
      />
    </Provider>
  ).toJSON()
  expect(tree).toMatchSnapshot()
})

＆＃13;

＆＃13;

＆＃13;

最后这是我的实际EditJournal Component：

＆＃13;

＆＃13;

import "./styles/list-item.scss";
import {Button, ButtonToolbar} from "react-bootstrap";
import {connect} from "react-redux";
import {Field, reduxForm} from "redux-form";
import EditInputField from "../form-fields/EditInputField";
import PropTypes from "prop-types";
import React from "react";

const renderField = props => {
    return (<EditInputField                                   
        {...props}
    />)
}
const EditJournalForm = (props) => {
        const {onClose, handleSubmit, pristine, submitting} = props;
        return (
            <form onSubmit={handleSubmit}>
                <div>     
                    <div className="form-field">
                        <Field
                            component={renderField}
                            label="Journal Id"
                            name="id"
                            type="text"
                            readOnly={true}
                        />
                    </div>           
                    <div className="form-field">
                        <Field
                            component={renderField}
                            label="Journal title"
                            name="title"
                            type="text"
                        />
                    </div>
                    <div className="form-field">
                        <Field
                            component={renderField}
                            componentClass="textarea"
                            label="Description"
                            name="description"
                            rows="5"
                            type="text"
                        />
                    </div>
                    <div className="form-button-group">
                        <ButtonToolbar>
                            <Button
                                bsSize="small"
                                style={{"width": "48%"}}
                                onClick={onClose}
                            >
                                Cancel
                            </Button>
                            <Button
                                bsSize="small"
                                disabled={pristine || submitting}
                                style={
                                    {
                                        "backgroundColor": "#999",
                                        "width": "48%"
                                    }}
                                type="submit"
                            >
                                Update
                            </Button>
                        </ButtonToolbar>
                    </div>
                </div>
            </form>
        );
}

EditJournalForm.propTypes = {
    "onClose": PropTypes.func,
    "handleSubmit": PropTypes.func.isRequired,
    "pristine": PropTypes.bool.isRequired,
    "submitting": PropTypes.bool.isRequired
};

EditJournalForm.defaultProps = {
};

const ReduxForm =  reduxForm({
    form: "editJournal", 
    enableReinitialize: true
})(EditJournalForm);

export default connect((state, ownProps) => {
    return {
        initialValues: {
           "id": state.bees.entities.journals[ownProps.journal.id].id,
           "title": state.bees.entities.journals[ownProps.journal.id].attributes.title,
           "description": state.bees.entities.journals[ownProps.journal.id].attributes.description,
        }
    };
}, undefined)(ReduxForm)

＆＃13;

＆＃13;

＆＃13;