I have a simple component like below, for which the snapshot is failing due to dynamically generated values for htmFor attribute of label generated from FormInput component
<div className="d-flex flex-wrap">
<div>
<FormInput
readonly
label={'Amount'}
value={amount}
/>
</div>
</div>
Snapshot when run without update complains as below -
- Snapshot
+ Received
@@ -53,21 +53,21 @@
<div
className="readonly form-group"
>
<label
className=""
- htmlFor="cc_0ni6f4s1i"
+ htmlFor="cc_cy8ml2idm"
>
Amount
</label>
<p
- aria-labelledby="cc_0ni6f4s1i"
+ aria-labelledby="cc_cy8ml2idm"
>
1234567
</p>
</div>
</div>
I have tried adding ID to FormInput as sugessted in other answers but nothing helps. Is there a way to overcome this issue or stop jest for matching these dynamic values altogether. Appreciate any pointers.