Проверьте подключенный компонент, не отображающий значения или полезную информацию. Реагировать / Redux - PullRequest
0 голосов
/ 31 октября 2018

У меня есть подключенный компонент, который выглядит следующим образом:

import React from "react";
...
import { reduxForm, Field } from "redux-form";
import FormTextField from "../../../components/FormFields/FormTextField";
...

const ExposureEditTable = ({ initialValues, classes }) => {
  return initialValues.exposures.map((exposure, index) => {
    return (
      <TableRow
        className={classes.locationLevelAnalysisTableBodyTableRow}
        key={index}
      >
        <TableCell className={classes.locationLevelAnalysisBodyTableCell}>
          <Field name={`exposures[${index}].left`} component={formTextField} />
        ...

        <TableCell
          numeric
          className={classes.locationLevelAnalysisBodyTableCell}
        >
          <Field
            name={`locationNumberOfBldgs[${exposure.locationIndex}]`}
            component={formTextField}
            type="number"
            validate={[greaterThanOrEqualToZero]}
          />
        </TableCell>
      </TableRow>
    );
  });
};

export default reduxForm({ form: "exposures" })(
  withStyles(styles)(ExposureEditTable)
);

Это моя тестовая установка:

import React from "react";
import { shallow, } from "enzyme";
import ExposureEditTable from "../../../../locationLevelAnalysis/components/exposures/ExposureEditTable";
import { reduxForm } from "redux-form";
import { Provider } from "react-redux";
import configureStore from "redux-mock-store";

describe("ExposureEditTable", () => {
  const bbLocationSubmissionFields = {
    ElevationFeet: 100,
    NumBuildingsFromThirdPartyData: 1,
  };

  const dummyExposureData = [
    {
      locationIndex: 0,
      wildfireRiskScore: 100,
      left: "Left Street",
      right: "Right Street",
      front: "Front Store",
      back: "Back Parking Lot",
      bbLocationSubmissionFields: bbLocationSubmissionFields,
    },
    {
      locationIndex: 1,
      wildfireRiskScore: 200,
      left: "Left Street",
      right: "Right Street",
      front: "Front Convenience Store",
      back: "Back Parking Lot",
      bbLocationSubmissionFields: bbLocationSubmissionFields,
    },
  ];

  const mockLocationNumberOfBldgs = [undefined, 7];

  let exposureTableWrapper;

  beforeEach(() => {
    const initialState = {};
    const middlewares = [];
    const mockStore = configureStore(middlewares);
    const store = mockStore(initialState);
    const defaultProps = {
      store,
      initialValues: {
        exposures: dummyExposureData,
        locationNumberOfBldgs: mockLocationNumberOfBldgs,
      },
    };

    const FormDecoratedComponent = reduxForm({
      form: "testExposures",
    })(ExposureEditTable);

    exposureTableWrapper = shallow(
      <Provider store={store}>
        <FormDecoratedComponent {...defaultProps} />
      </Provider>
    );
  });

  it("renders a row with each building's exposures data", () => {
    expect(exposureTableWrapper).toMatchSnapshot();
  });
});

Но мой снимок выглядит пустым и бесполезным. Я не просто хочу, чтобы значения, которые я передаю в качестве начальных значений ... Я также хочу видеть значения в текстовых полях. Почему это так? Это снимок:

+<ReduxForm
+  initialValues={
+    Object {
+      "exposures": Array [
+        Object {
+          "back": "Back Parking Lot",
+          "bbLocationSubmissionFields": Object {
+            "ElevationFeet": 100,
+            "NumBuildingsFromThirdPartyData": 1,
+          },
+          "front": "Front Store",
+          "left": "Left Street",
+          "locationIndex": 0,
+          "right": "Right Street",
+          "wildfireRiskScore": 100,
+        },
+        Object {
+          "back": "Back Parking Lot",
+          "bbLocationSubmissionFields": Object {
+            "ElevationFeet": 100,
+            "NumBuildingsFromThirdPartyData": 1,
+          },
+          "front": "Front Convenience Store",
+          "left": "Left Street",
+          "locationIndex": 1,
+          "right": "Right Street",
+          "wildfireRiskScore": 200,
+        },
+      ],
+      "locationNumberOfBldgs": Array [
+        undefined,
+        7,
+      ],
+    }
+  }
+  store={
+    Object {
+      "clearActions": [Function],
+      "dispatch": [Function],
+      "getActions": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+    }
+  }

Что я делаю не так?

Другие снимки выглядят так:

</WithStyles(TableRow)>,
  <WithStyles(TableRow)
    className="ExposureViewTable-locationLevelAnalysisTableBodyTableRow-7"
    key="1"
>
    <WithStyles(TableCell)
        className="ExposureViewTable-locationLevelAnalysisBodyTableCell-11"
        numeric={true}
    >
        **100**
    </WithStyles(TableCell)>
    <WithStyles(TableCell)
        className="ExposureViewTable-locationLevelAnalysisBodyTableCell-11"
    >
        Left Street
  ...

Выше приведены значения (жирным шрифтом)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...