storybook onchange 이벤트 테스트

(React와 Styled-components로 진행)

 

개요

공통 Input 컴포넌트를 만들면서 스토리북에서 input 값이 잘 입력 되는지 테스트 해보고 싶었다.

그런데 onClick과는 달리 @storybook/test의 fn만 추가하는 것으로는 onChange 동작 및 바인딩된 함수를 테스트할 수가 없다.

그래서 새롭게 useArgs를 사용했다.

 

---

 

구현

CommonInput.tsx

import { InputBox } from "./CommonInput.styles";

export default function CommonInput({ value, placeholder, onChange }: Props) {
  return (
    <InputBox
      type="text"
      value={value}
      placeholder={placeholder}
      onChange={onChange}
    />
  );
}

 

 

CommonInput.stories.tsx

import { fn } from "@storybook/test";
import { Meta } from "@storybook/react";
import { useArgs } from "@storybook/preview-api";
import CommonInput from "./CommonInput";

const meta: Meta<typeof CommonInput> = {
  title: "Input/CommonInput",
  component: CommonInput,
  parameters: {
    layout: "centered", // 중앙 배치
  },
  tags: ["autodocs"], // 문서 자동 생성
  argTypes: {
    placeholder: { control: "text" },
    value: { control: "text" },
  },
  args: {
    placeholder: "아이디를 입력하세요",
    value: "",
    onChange: fn(),
  },
};

export default meta;

export const Example = {
  render: function Render(args: Props) {
    const [{ value }, setValue] = useArgs();
    const changeInputValue = (e: React.ChangeEvent<HTMLInputElement>) => {
      setValue({ value: e.target.value });
    };
    return <CommonInput {...args} value={value} onChange={changeInputValue} />;
  },
};

테스트할 스토리를 render를 이용해 재정의한다.

render 안에 변수와 onchange에 바인딩할 함수를 작성해주면 되는데, 이때는 useEffect를 사용하는 것이 아니라 useArgs를 사용하여 변수와 set함수를 선언한다.

또한 value의 경우 args에 정의된 값을 그대로 사용하는 것이기 때문에 중괄호 안에 넣어서 사용해줘야 한다.

같은 맥락으로 set함수 안에서 value 값을 바꿀 때에도 중괄호를 사용했다.

 

---

 

결과

 

 

---

[ 참고 자료 ]

Args • Storybook docs