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