У меня есть подключенный компонент, который выглядит следующим образом:
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
...
Выше приведены значения (жирным шрифтом)