How to unit test a UI change caused by a user interaction - reactjs

Question

I'm using vitest and react testing library and the situation is the following:
I'm trying to test whether the UI updates after a user interacts with an input checkbox.
Then the question is: how to do it to be sure that when a user clicks the input, the parent component gets a blue border (I'm using tailwind).
The component that I'm testing:
export const AddOn: FC<props> = ({
title,
desc,
price,
type,
handleAdd,
handleRemove,
checked,
}) => {
const [isChecked, toggleCheck] = useState(checked);
useEffect(() => {
isChecked
? handleAdd(title.toLowerCase(), price)
: handleRemove(title.toLowerCase(), price);
}, [isChecked]); // eslint-disable-line react-hooks/exhaustive-deps
return (
<div
className={
"relative w-full border border-n-light-gray rounded-md p-3 lg:px-6 lg:py-3 flex gap-4 items-center hover:opacity-70 " +
(**checked ? " border-p-purplish-blue bg-n-alabaster"** : "")
}
*data-testid={`addon-${title}-container`}*
>
<div className="flex gap-4">
<input
autoComplete="off"
className="w-6 h-6 self-center cursor-pointer"
*data-testid={`addon-${title}`}*
defaultChecked={checked}
type="checkbox"
*onClick={() => toggleCheck(!checked)}*
onKeyPress={(e) => {
e.preventDefault();
toggleCheck(!checked);
}}
/>
<div className="w-8/12 sm:w-full text-left">
<h3 className="text-base text-p-marine-blue font-bold">{title}</h3>
<p className="text-n-cool-gray justify-self-start">{desc}</p>
</div>
</div>
<p className="text-p-purplish-blue text-base font-medium absolute right-2 lg:right-6">
{type === "monthly" ? `+$${price}/mo` : `+$${price}/yr`}
</p>
</div>
);
};
And the test I wrote is:
test("UI TEST: should show the container with a blue border after user clicks on", async () => {
render(
<AddOn
checked={false}
desc="test"
handleAdd={() => {}}
handleRemove={() => {}}
price={0}
title="title-test"
type="test"
/>
);
const addOnOnlineService: HTMLInputElement = await screen.findByTestId(
"addon-title-test"
);
await userEvent.click(addOnOnlineService);
const testContainer: HTMLDivElement = await screen.findByTestId(
"addon-title-test-container"
);
await waitFor(() => {
expect(Array.from(testContainer.classList)).toContain(
"border-p-purplish-blue"
);
});
});
I tried running my test but I couldn't see the HTML updated in the test output. I got the same without the class "border-p-purplish-blue bg-n-alabaster" added because of the state change.

Answer 1

My example could help but I did not using your test way.
1.import act
import { act } from "react-dom/test-utils";
2.using dispatch event then check when text changes, testing class name
it("password length", () => {
act(() => {
render(<ChangePasswordState />, container);
});
expect(state).toBeNull();
let buttonChange = document.getElementsByClassName("blue")[2];
let txtPassword = document.getElementsByTagName("input")[0];
let txtConfirmPassword = document.getElementsByTagName("input")[1];
act(() => {
txtPassword.setAttribute("value", "1234567");
txtPassword.dispatchEvent(new CustomEvent("change", { bubbles: true }))
txtConfirmPassword.setAttribute("value", "1234567");
txtConfirmPassword.dispatchEvent(new CustomEvent("change", { bubbles: true }))
});
expect(buttonChange.className).toContain("disabled");
});