ReadOn/FE
프로젝트 세팅 - Next.js, Storybook, Jest
chaeon1
2025. 6. 15. 23:58
💙 프론트엔드
🖥️ Next.js
작업 디렉토리로 이동
cd /Projects
프로젝트 생성
npx create-next-app@latest
예시 응답:
√ What is your project named? ... read-on
√ Would you like to use TypeScript? ... No / Yes
√ Would you like to use ESLint? ... No / Yes
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like your code inside a `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes
√ Would you like to use Turbopack for `next dev`? ... No / Yes
√ Would you like to customize the import alias (`@/*` by default)? ... No / Yes
√ What import alias would you like configured? ... @/*
🔗 참고
🤎 테스트 및 문서화 도구
📕 Storybook
✅ 설치 및 초기화
npm create storybook@latest
- 자동으로 Vite 기반 preset(@storybook/nextjs-vite)으로 설치됨
@storybook/addon-a11y
,@storybook/addon-vitest
포함
▶️ 실행
npm run storybook
🃏 Jest
✅ 설치
npm install -D jest jest-environment-jsdom @testing-library/react @testing-library/dom @testing-library/jest-dom
npm init jest@latest
설정 예시:
√ Would you like to use Jest when running "test" script in "package.json"? ... yes
√ Would you like to use Typescript for the configuration file? ... yes
√ Choose the test environment that will be used for testing » jsdom (browser-like)
√ Do you want Jest to add coverage reports? ... no
√ Which provider should be used to instrument code for coverage? » babel
√ Automatically clear mock calls, instances, contexts and results before every test? ... yes
⚙️ 설정 파일
jest.config.ts
import type { Config } from 'jest';
const config: Config = {
clearMocks: true,
testEnvironment: 'jsdom',
testMatch: [
'**/__tests__/**/*.test.[jt]s?(x)',
'**/?(*.)+(spec|test).[jt]s?(x)',
],
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1',
},
setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
};
export default config;
jest.setup.ts
import '@testing-library/jest-dom';
🔗 참고