如何测试基于Props动态修改CSS属性的useEffect钩子？

首先，你的组件代码里有个致命错误：右侧单位<p>标签的ref被错误地设置成了inputRef，和输入框的ref冲突了，导致useEffect里unitRef.current始终是null，根本不会执行padding-right的设置逻辑。先把这个bug修复：

// 原错误代码
<p
  ref={inputRef}  // 这里错了，应该用unitRef
  ...
>

// 修复后
<p
  ref={unitRef}
  className={classNames(styles.unit, {
    [styles.unitPrimary]: type === "primary",
    [styles.unitSecondary]: type === "secondary",
    [styles.unitTernary]: type === "ternary",
  })}
  data-cy="textfield-unit"
>
  {unit}
</p>

修复组件后，再编写测试代码。因为padding-right是动态计算值（单位宽度+20px），不能断言固定数值，需要先获取单位元素的实际宽度，再计算预期的padding值：

it("should adjusts input padding based on unit width", () => {
  const onChange = () => {};
  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(() => {
    // 先获取单位元素的宽度
    cy.get('[data-cy="textfield-unit"]')
      .invoke('getBoundingClientRect')
      .its('width')
      .then(unitWidth => {
        // 计算预期的padding-right值：单位宽度 + 20px
        const expectedPaddingRight = `${unitWidth + 20}px`;
        // 断言输入框的padding-right符合预期
        cy.get('input').should('have.css', 'padding-right', expectedPaddingRight);
      });
  });
});

额外说明 #

• 如果你的样式文件里已经给输入框设置了基础的padding-right，要注意这里的动态设置会覆盖它，测试时要确保计算逻辑和组件一致。
• Cypress的invoke('getBoundingClientRect')可以获取元素的实际渲染尺寸，和组件里的逻辑保持一致，保证测试准确性。

内容的提问来源于stack exchange，提问作者Ala Eddine Menai