Howt to test useEffect hook that changes the CSS property based on the prop?

Question

I have a TextField component that contains a unit ( p) on the right. I change the padding between this unit and the text value dynamically within useEffect but when I wanted to ensure that it works correctly using component Testing with Cypress, I blocked.

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", "???");
    });
  });

Answer 1

The app sets paddingRight to ${unitWidth + 20}px, you can repeat that calculation inside the .should().

cy.get("input").should($el => {
  const unitWidth = $el[0].getBoundingClientRect().width
  const expected = `${unitWidth + 20}px`
  const actual = window.getComputedStyle($el[0]).getPropertyValue('padding-right')
  expect(actual).to.eq(expected)
})

This should succeed even if the element width changes due to window width, flex layout, media queries (mobile/tablet/desktop).

If I understand correctly, you just want to know that the padding is always width +20.

---

If unitRef is pointing to <p>

I think the test code needs adjusting if my assumption about unitRef is correct, i.e it should be bound to the <p> element.

If so, the .should() callback needs both <input> and <p>.

cy.get('p').then($p => {
  cy.get('input').should($input => {

    const unitWidth = $p[0].getBoundingClientRect().width
    const expected = `${unitWidth + 20}px`

    const actual = window.getComputedStyle($input[0])
      .getPropertyValue('padding-right')

    expect(actual).to.eq(expected)
  })
})