Storybook — UI test

javascript test code

StoryBook

https://storybook.js.org/docs/react/get-started/whats-a-story

Args

Args can be used to dynamically change props, slots, styles, inputs, etc. When an arg’s value is changed, the component re-renders, allowing you to interact with components in Storybook’s UI via addons that affect args.

Story args

Case 1. 컴포넌트 props UI, 동작 테스트

// Button.stories.tsx
import React from 'react';
import { Story } from '@storybook/react';
import { ButtonProps } from './Button';
//👇 We create a “template” of how args map to rendering
const Template: Story<ButtonProps> = (args) => <Button {...args} />;
export const Primary = Template.bind({});
Primary.args = {
	props1: 'Primary',
}

Component args

Case 2. 새로운 props ‘label’ 추가하여 테스트

import { Story, Meta } from '@storybook/react';
import Button from './Button';
export default {
  title: 'Buttons / Button',
  component: Button,
  argTypes: {
    // add new argument
    label: {
      control: 'text',
    },
    // hide existed argument
    className: {
      table: {
        disable: true,
      },
    },
  },
  // preset
  args: {
    label: '버튼명을 입력하세요.',
  },
} as Meta;
const Template = (args: any) => {
  return <Button {...args}>{args.label}</Button>;
};
export const Primary = Template.bind({});