Reactjs 如何测试根据 prop 更改 CSS 属性的 useEffect 钩子

我有一个Textfield组件，它的右侧包含一个单位(p).我在useEffect内动态更改了这个单元和文本值之间的填充，但是当我想使用Cypress的组件测试来确保它正确工作时，我阻止了它.

import classNames from "classnames";
import { IProps } from "./type";
import styles from "./style.module.css";
import { useEffect, useRef } from "react";

const TextField = ({
  ID,
  value,
  placeholder,
  type,
  rounded,
  outline,
  disabled,
  icon,
  unit,
  onChange,
  onFocus,
  onBlur,
}: IProps) => {
  const unitRef = useRef<HTMLParagraphElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);

  // How to test this hook
  useEffect(() => {
    if (unitRef.current && inputRef.current) {
      const unitWidth = unitRef.current.getBoundingClientRect().width;
      inputRef.current.style.paddingRight = `${unitWidth + 20}px`;
    }
  }, [unit]);
  return (
    <div
      className={styles.wrapper}
      data-cy="textfield-wrapper"
    >
      {icon && (
        <div
          className={classNames(styles.icon, {
            [styles.iconPrimary]: type === "primary",
            [styles.iconSecondary]: type === "secondary",
            [styles.iconTernary]: type === "ternary",
          })}
          data-cy="textfield-icon"
        >
          {icon}
        </div>
      )}
      <input
        ref={inputRef}
        id={ID}
        type="text"
        value={value}
        placeholder={placeholder}
        className={classNames(styles.textfield, {
          [styles.primary]: type === "primary",
          [styles.secondary]: type === "secondary",
          [styles.ternary]: type === "ternary",
          [styles.rounded]: rounded,
          [styles.outline]: outline,
          [styles.paddingLeft]: icon,
          [styles.paddingRight]: unit,
        })}
        disabled={disabled}
        onChange={onChange}
        onFocus={onFocus}
        onBlur={onBlur}
      />
      {unit && (
        <p
          ref={inputRef}
          className={classNames(styles.unit, {
            [styles.unitPrimary]: type === "primary",
            [styles.unitSecondary]: type === "secondary",
            [styles.unitTernary]: type === "ternary",
          })}
          data-cy="textfield-unit"
        >
          {unit}
        </p>
      )}
    </div>
  );
};

export default TextField;

``

button.cy.tsx

  it("should adjusts input padding based on unit width", () => {
    const onChange = () => {
      console.log("TextField");
    };
    cy.mount(
      <TextField
        ID="textfield"
        value="credium Textfield"
        onChange={onChange}
        type="primary"
        icon={<IoMdHome />}
        unit="kWh"
        rounded
        outline
      />
    );
    cy.get('[data-cy="textfield-wrapper"]').within(() => {
      // blocked here
      cy.get("input").should("have.css", "padding-right", "???");
    });
  });