리액트 컴포넌트 테스트 및 문서용으로 story book 사용해 보았다 스토리북
$ npx sb init
$ npm install @storybook/test-runner --save-dev"scripts": {
...
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"
},// /src/components/button/Button.tsx
import {ButtonProps} from "./Button.types";
const Button: React.FC<ButtonProps> = (props) => {
return (
<button>{props.text}</button>
)}
export default Button;기본 세팅 title 과 component를 지정한뒤 인수를 넣어볼수 있는 객체를 리턴 하면 항복 별로 매뉴에 노출된다
// /src/components/button/Button.stories.tsx
import Button from "./Button";
import {Meta, StoryFn} from '@storybook/react';
export default {
title: 'Button',
component: Button
} as Meta<typeof Button>
const Template: StoryFn<typeof Button> = (args) => <Button {...args} />
export const ButtonTest = Template.bind({});
ButtonTest.args = {
text: 'click me'
};
export const ButtonTest2 = Template.bind({});
ButtonTest2.args = {
text: 'click me2'
};$ npm run storybook
