해결됨
실무에 바로 적용하는 스토리북과 UI 테스트
react-toastify 를 storybook에 출력 시키기
react-toastify를 사용하시는 경우 storybook에서 출력하는데 곤란함을 겪는 분들이 계실 거 같아 자문자답 올려둡니다! package.json
"react-toastify": "^10.0.4"
"@types/react": "^18.3.12",
"@storybook/react": "^8.3.0",
.storybook/preview.tsx ( ts가 아닌 tsx )17버전 이상이라 import React from 'react'가 안되서 아래와 같이 @jsxImportSource 추가 /** @jsxImportSource react */
import type { Preview } from '@storybook/react';
// react-toastify 관련 import
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
Modal.setAppElement('#storybook-root');
const preview: Preview = {
parameters: {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
decorators: [
Story => (
<>
<Story />
<ToastContainer
position="bottom-right"
autoClose={3000}
hideProgressBar={false}
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
theme="light"
/>
</>
),
],
};
export default preview;tsconfig.json{
"compilerOptions": {
"jsx": "react-jsx",
}
}
