An Interest In:
Web News this Week
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
January 21, 2022 10:01 pm GMT
Original Link: https://dev.to/rexebin/testing-a-mui-date-picker-adaptor-component-integrated-with-react-hook-form-4pa4
Testing a Mui Date Picker Adaptor Component Integrated with React Hook Form
Subject Under Test
A date picker component integrating mui's date picker with React Hook Form's form context. It uses the Controller
component from React Hook Form(RHF) and configures mui's DatePicker
to handle validations and more. I use this component instead of mui
's DatePicker
in all my forms.
Behaviours
- It inherits all the behaviours from
DatePicker
ofmui
and accepts allDatePicker
props as-is. - It takes
name
,formContext
anddefaultValue
required props and registers theDatePicker
to the form context of RHF - It has two modes: edit mode and read-only mode. In read-only mode, it is disabled, has no date picker icon button and is rendered as a standard(underline)
TextField
. In edit mode, it is rendered as outlinedTextField
. - It builds in the
required
validation rule and takes arequired
prop. - It builds in a validation rule for invalid date input
- It accepts validation rules and enforces them.
- It takes an optional
onChange
prop. It will update the value and trigger the givenonChange
method on change. - It has a default mask and date format and can be changed with props.
- It defaults to size small, full width and shrink label.
- It set time to end of the day.
- It takes a
style
prop for styling the underlyingTextField
.
Code
Notes
matchMedia
is mocked so that the date picker can be rendered in desktop mode with the date picker icon buttonTestComponent
sets up a React Hook Form environment and shows how the SUT can be used.FormForTesting
is a testing utility component for testing React Hook Form form components.- The tests are grouped into three categories: appearance, behaviours and validations.
Original Link: https://dev.to/rexebin/testing-a-mui-date-picker-adaptor-component-integrated-with-react-hook-form-4pa4
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To