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

1. It inherits all the behaviours from DatePicker of mui and accepts all DatePicker props as-is.
2. It takes name, formContext and defaultValue required props and registers the DatePicker to the form context of RHF
3. 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 outlined TextField.
4. It builds in the required validation rule and takes a required prop.
5. It builds in a validation rule for invalid date input
6. It accepts validation rules and enforces them.
7. It takes an optional onChange prop. It will update the value and trigger the given onChange method on change.
8. It has a default mask and date format and can be changed with props.
9. It defaults to size small, full width and shrink label.
10. It set time to end of the day.
11. It takes a style prop for styling the underlying TextField.

Code

Notes

1. matchMedia is mocked so that the date picker can be rendered in desktop mode with the date picker icon button
2. TestComponent sets up a React Hook Form environment and shows how the SUT can be used.
3. FormForTesting is a testing utility component for testing React Hook Form form components.
4. The tests are grouped into three categories: appearance, behaviours and validations.