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';

🔗 참고