Question

我正在尝试测试包含响应路由器提示以及redux表单的组件。

当我尝试使用提供程序安装组件并存储时，出现以下错误。

  Invariant Violation: You should not use <Prompt> outside a <Router>

笑话代码：

beforeEach(() => {
  store = createStore(combineReducers({ form: formReducer }));
  wrapper = mount(
    <Provider store={store}>
      <AddClerkForm />
    </Provider>,
  );
});

代码：

<Card>
  <Prompt
    when={props.dirty}
    message="Seems like you have some unsaved changes, Do you want to Exit?"
  />
  <CardHeader>
    <Row>
      <Col xs="6" lg="5">
        <Button
          className="bg-gradient-theme-left border-0"
          disabled={isLoading}
          onClick={goBack}
        >
          <FaChevronLeft className="button-padding" size={18} />
          &nbsp;Back
        </Button>
      </Col>
      <Col xs="6" lg="7">
        <h4 className="font-weight-bold">Add New Clerk</h4>
      </Col>
    </Row>
  </CardHeader>
  <form onSubmit={handleSubmit} noValidate={true}>
    <Col sm="12">
      <Card className="card-border">
        <CardBody>
          <FormGroup row={true}>
            <Col xs="12" lg="6">
              <Field
                name="clerkName"
                type="text"
                component={ReduxFormInput}
                label="Clerk Name *"
                placeHolder="Enter Clerk Name"
                normalize={name}
              />
            </Col>
            <Col xs="12" lg="6">
              <Field
                name="clerkEmail"
                type="text"
                component={ReduxFormInput}
                label="Email *"
                placeHolder="Enter Email Address"
              />
            </Col>
          </FormGroup>

          <FormGroup row={true}>
            <Col xs="12" lg="6">
              <Field
                name="phone"
                type="text"
                component={ReduxFormInput}
                label="Phone Number *"
                placeHolder="Enter Phone Number"
                normalize={mobile}
              />
            </Col>
            <Col xs="12" lg="6">
              <Field
                name="mobile"
                type="text"
                component={ReduxFormInput}
                label="Mobile Number *"
                placeHolder="Enter Mobile Number"
                normalize={mobile}
              />
            </Col>
          </FormGroup>
          <FormGroup row={true}>
            <Col xs="12" lg="12">
              <Label>Clients *</Label>
              <Select
                value={option}
                onChange={handleChange}
                closeMenuOnSelect={false}
                options={options}
                hideSelectedOptions={true}
                isMulti={true}
              />
              <Field name="selectedClients" type="hidden" component={ReduxEmptyFormInput} />
            </Col>
          </FormGroup>
          <Col xs="12" align="center">
            <LoadingButton
              text="Save"
              loadingText="Saving"
              isLoading={isLoading}
              size="lg"
              block={false}
            />
          </Col>
        </CardBody>
      </Card>
    </Col>
  </form>
</Card>

我试图在提供商内部使用路由器，但出现相同的错误。如果我尝试使用浅表，则错误不会出现，但我无法模拟或测试其他组件

由于在玩笑中使用提示而导致不变式违规

0 个答案: