✅ test : 찜버튼 테스트 코드 작성

components/common/heartButton/index.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen, waitFor } from '@testing-library/react';
+import { mockAnimationsApi } from 'jsdom-testing-mocks';
+import HeartButton from '.';
+
+mockAnimationsApi();
+
+describe('heartButton', () => {
+  it('버튼을 클릭하면 하트가 변경되는지 테스트', async () => {
+    const user = userEvent.setup();
+    let isButtonActive = true;
+
+    const stateHandler = () => {
+      isButtonActive = !isButtonActive;
+    };
+    render(
+      <HeartButton
+        isButtonActive={isButtonActive}
+        stateHandler={stateHandler}
+        data-testid="heart-button"
+      />,
+    );
+
+    const button = screen.getByTestId('heart-button');
+    await user.click(button);
+
+    await waitFor(() => {
+      const content = screen.getByTestId('fullHeartIcon');
+      expect(content).toBeVisible();
+    });
+  });
+});

components/common/heartButton/index.tsx

@@ -23,7 +23,7 @@ const HeartButton = ({
 }: HeartButtonPropsType) => {
   return (
     <div className="flex items-center justify-center">
-      <button onClick={stateHandler}>
+      <button onClick={stateHandler} data-testid="heart-button">
         {!isButtonActive ? (
           <EmptyHeartIcon
             width={width}

public/svgComponent/fullHeart.tsx

@@ -12,6 +12,7 @@ const FullHeartIcon: React.FC<FullHeartIconProps> = ({width=24, height=24}) => (
     viewBox="0 0 24 24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    data-testid="fullHeartIcon"
   >
     <path
       fillRule="evenodd"