diff --git a/packages/wow-ui/src/components/Stepper/Stepper.stories.tsx b/packages/wow-ui/src/components/Stepper/Stepper.stories.tsx
index 498ac9f1..c53ad1f9 100644
--- a/packages/wow-ui/src/components/Stepper/Stepper.stories.tsx
+++ b/packages/wow-ui/src/components/Stepper/Stepper.stories.tsx
@@ -63,7 +63,7 @@ export const Default: Story = {
},
};
-export const StepperWithMarkers: Story = {
+export const StepperWithLabels: Story = {
args: {
step: 1,
maxStep: 3,
diff --git a/packages/wow-ui/src/components/Stepper/Stepper.test.tsx b/packages/wow-ui/src/components/Stepper/Stepper.test.tsx
new file mode 100644
index 00000000..96c27b5a
--- /dev/null
+++ b/packages/wow-ui/src/components/Stepper/Stepper.test.tsx
@@ -0,0 +1,106 @@
+import { cleanup, render, screen } from "@testing-library/react";
+
+import Stepper from "@/components/Stepper";
+
+describe("Stepper rendering Test", () => {
+ beforeEach(() => {
+ render();
+ });
+
+ it("should render Stepper", () => {
+ const stepper = screen.getByRole("progressbar");
+ expect(stepper).toBeInTheDocument();
+ });
+
+ it("should render with attributes aria-label stepper", () => {
+ const stepper = screen.getByRole("progressbar");
+
+ expect(stepper).toHaveAttribute("aria-label", "stepper");
+ });
+});
+
+describe("Stepper step state Test", () => {
+ beforeEach(() => {
+ render();
+ });
+ it("should stepper min value is 1", () => {
+ const stepper = screen.getByRole("progressbar");
+ expect(stepper).toHaveAttribute("aria-valuemin", "1");
+ });
+
+ it("should stepper value is 3", () => {
+ const stepper = screen.getByRole("progressbar");
+ expect(stepper).toHaveAttribute("aria-valuetext", "3");
+ });
+
+ it("should stepper max value is 5", () => {
+ const stepper = screen.getByRole("progressbar");
+ expect(stepper).toHaveAttribute("aria-valuemax", "5");
+ });
+});
+
+describe("Stepper Labels Rendering Test", () => {
+ beforeEach(() => {
+ render(
+
+ );
+ });
+ it("should stepper label render", () => {
+ const step1 = screen.getByText("Step1");
+ expect(step1).toBeInTheDocument();
+
+ const step2 = screen.getByText("Step2");
+ expect(step2).toBeInTheDocument();
+
+ const step3 = screen.getByText("Step3");
+ expect(step3).toBeInTheDocument();
+
+ const step4 = screen.getByText("Step4");
+ expect(step4).toBeInTheDocument();
+
+ const step5 = screen.getByText("Step5");
+ expect(step5).toBeInTheDocument();
+ });
+});
+
+describe("Control step change Test", () => {
+ it("should stepper step state change when external step changed ", async () => {
+ const checkStepValue = async (step: number) => {
+ render();
+ const stepper = screen.getByRole("progressbar");
+ expect(stepper).toHaveAttribute("aria-valuetext", step.toString());
+ cleanup();
+ };
+
+ await checkStepValue(1);
+ await checkStepValue(2);
+ await checkStepValue(3);
+ await checkStepValue(4);
+ await checkStepValue(5);
+ });
+
+ it("should stepper maxStep state change when external maxStep changed ", async () => {
+ const checkMaxStepValue = async (maxStep: number) => {
+ render();
+ const stepper = screen.getByRole("progressbar");
+ expect(stepper).toHaveAttribute("aria-valuemax", maxStep.toString());
+ cleanup();
+ };
+
+ await checkMaxStepValue(1);
+ await checkMaxStepValue(2);
+ await checkMaxStepValue(3);
+ await checkMaxStepValue(4);
+ await checkMaxStepValue(5);
+ });
+});
diff --git a/packages/wow-ui/src/components/Stepper/index.tsx b/packages/wow-ui/src/components/Stepper/index.tsx
index 2deaa207..967a9ffb 100644
--- a/packages/wow-ui/src/components/Stepper/index.tsx
+++ b/packages/wow-ui/src/components/Stepper/index.tsx
@@ -30,7 +30,7 @@ const checkStepperStatus = (number: number, step: number) => {
* @param {number} width Stepper의 가로 길이를 자유롭게 정할 수 있어요. 단, 278px 이상이어야 합니다.
*/
-const Stepper = ({ step, maxStep = 3, labels, width }: StepperProps) => {
+const Stepper = ({ step = 1, maxStep = 3, labels, width }: StepperProps) => {
const fillStepper = useCallback((maxStep: number, step: number) => {
const ratio = (step - 1) / (maxStep - 1);
return ratio > 1 ? "100%" : `${ratio * 100}%`;