2

I am trying to test a component in jest which contains the react router prompt as well as the redux form.

when i tried to mount the component with provider and store i am getting the below error.

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

Jest Code:

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

Code:

<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>

I have tried to use the router inside the provider but i am getting the same error. If i try to use the shallow the error is not coming but i couldn't simulate or test the other components

skyboyer
  • 15,149
  • 4
  • 41
  • 56
Nidhin Kumar
  • 2,198
  • 5
  • 18
  • 44

0 Answers0