typescript - 由于时间属性默认为本地时间，快照测试失败

Question

我正在尝试通过快照测试，但startTime属性在我放入 mockState 的时间后 4 小时保持默认为时间。我尝试在 package.json 中设置时区，但没有看到任何变化。我在 Windows 上使用 react-datepicker 和 typescript 以及 jest 和酵素进行测试。

测试文件 (Schedule.test.tsx)

    scheduleCriteria: new ScheduleCriteria(
        true,
        new Date("2020/04/06 05:00:00"),
        new Date("2020/04/06 05:00:00"), // **startTime**
        ScheduleRepeatOptionsEnum.DAILY,
        new ScheduleRepeatDaily(),
        new ScheduleRepeatWeekly(),
        new ScheduleRepeatMonthly(MonthlyRunningOptions.SPECIFIC_DAYS)
    )
};

describe("ScheduleReportOption ", () => {
    const getComp = (customState = mockState) => {
        jest.spyOn(redux, "useDispatch").mockReturnValue(jest.fn());
        jest.spyOn(redux, "useSelector").mockImplementation(selector => selector(customState));
        return (
            <BrowserRouter>
                <ScheduleReportOption />
            </BrowserRouter>
        );
    };

    it("render ScheduleReportOption", () => {
        const wrapper = mount(getComp());
        expect(wrapper).toMatchSnapshot();
    });
}

我正在测试的文件 (Schedule.tsx)

import React, {ChangeEvent} from "react";
import {useDispatch, useSelector} from "react-redux";
import {useTranslation} from "react-i18next";
import {Col, Form, Row} from "react-bootstrap";
import DatePicker from "react-datepicker";

const startTime = useSelector((state: ReportingState) => state.scheduleCriteria.startTime);

return (
        <>
            <Row className="pb-5">
                <Form.Row>
                    <Form.Group as={Col} controlId="formStartCritDt">
                        <Form.Label>{t("AR_LBL_NR_SCHD_STARTS")}</Form.Label>
                        <DatePicker
                            className="ui-icon-calendar"
                            selected={startDate}
                            dateFormat="dd-MMM-yyyy"
                            showYearDropdown
                            onChange={onScheduleStartDateSelect}
                        />
                    </Form.Group>
                    <Form.Group as={Col} controlId="formStartCritTime">
                        <Form.Label>{t("AR_LBL_NR_SCHD_AT")}</Form.Label>
                        <DatePicker
                            className="ui-icon-clock"
                            selected={startTime}
                            onChange={onScheduleStartTimeSelect}
                            showTimeSelect
                            showTimeSelectOnly
                            timeIntervals={15}
                            dateFormat="hh:mm a"
                        />
                    </Form.Group>
               </Form.Row>
          </Row className="pb-5">
      </>

部分快照输出 (Schedule.test.snap.tsx)

 <FormGroup
                as={
                  Object {
                    "$$typeof": Symbol(react.forward_ref),
                    "displayName": "Col",
                    "render": [Function],
                  }
                }
                controlId="formStartCritDt"
              >
                <Col
                  className="form-group"
                >
                  <div
                    className="form-group col"
                  >
                    <FormLabel
                      column={false}
                      srOnly={false}
                    >
                      <label
                        className="form-label"
                        htmlFor="formStartCritDt"
                      >
                        Start
                      </label>
                    </FormLabel>
                    <o
                      selected={2020-04-06T09:00:00.000Z}// Time set 4 hours forward
                      timeIntervals={30}
                    >
                      <a>
                        <Manager
                          className="react-datepicker-manager"
                        >
                          <Reference>
                            <InnerReference>
                              <div
                                className="react-datepicker-wrapper">
                                <div>
                                  <input
                                    className="ui-icon-calendar"
                                    type="text"
                                    value="06-Apr-2020"
                                  />
                                </div>
                              </div>
                            </InnerReference>
                          </Reference>
                        </Manager>
                      </a>
                    </o>
                  </div>
                </Col>
              </FormGroup>

包.json

"scripts": {
        "test": "set TZ=EST && react-scripts test --env=jsdom-fourteen --coverage --watchAll=false"
}

任何帮助将不胜感激。

标签： typescripttestingjestjsenzymereact-datepicker