Jest Snapshot Failing due to dynamic htmlFor and aria-labelledby values

Viewed 234

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.

0 Answers
Related