환경설정

npm install -D vitest

{
  "scripts": {
    "test": "vitest",
    "coverage": "vitest run --coverage",
    "test-ui": "vitest --ui"
  }
}

/// <reference types="vitest" />/// <reference types="vite/client" />
 
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vitest/config';
 
export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'dist', // 빌드 결과물 출력 디렉터리
    emptyOutDir: true, // 빌드 전 outDir 디렉터리 비우기
    rollupOptions: {
      input: {
        main: '/src/main.tsx', // 엔트리 파일 지정
      },
      external: [ // 제외할 디렉터리 및 파일 패턴 설정
        '/tests/',
        '/tests/**/*',
        '/mocks/',
        '/mocks/**/*',
        '/node_modules/**/*',
      ],
    },
  },
  test: {
    setupFiles: './test/setup.ts',
  },
})

import '@testing-library/jest-dom/vitest';

npm install -D msw

import { setupServer } from 'msw/node';
import { handlers } from './handlers';
 
export const server = setupServer(...handlers);

// /handlers/index.ts
 
import { achievementHandlers } from './achievement';
import { userHandlers } from './user';
 
// network description array.
export const handlers = [...userHandlers, ...achievementHandlers];

import '@testing-library/jest-dom/vitest';
import { beforeAll, afterEach, afterAll } from 'vitest';
import { server } from '../mocks/node';
 
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

npm install -D @testing-library/react @testing-library/jest-dom

// Jest-DOM 유틸리티 함수를 Vitest에 추가
import '@testing-library/jest-dom/vitest';
 
// Vitest 유틸리티와 훅(hook)을 임포트
import { expect, beforeAll, afterEach, afterAll } from 'vitest';
 
// React Testing Library의 cleanup 함수를 임포트
import { cleanup } from '@testing-library/react';
 
// Jest-DOM 매처를 임포트
import matchers from '@testing-library/jest-dom/matchers';
 
// 모의(mock) API 서버를 임포트
import { server } from '../mocks/node';
 
// react-testing-library의 matcher를 확장한다.
// `@testing-library/jest-dom`의 matcher를 사용할 수 있게 된다.
expect.extend(matchers);
 
// 모든 테스트 실행 전에 모의 API 서버를 시작
beforeAll(() => server.listen());
 
// 각 테스트 케이스 후에 모의 API 서버의 핸들러를 리셋하고, React Testing Library에서 렌더링된 요소를 정리(cleanup)
afterEach(() => {
  server.resetHandlers();
  cleanup();
});
 
// 모든 테스트 실행 후에 모의 API 서버를 종료
afterAll(() => server.close());
 

/// <reference types="vitest" />
import { defineConfig, type PluginOption } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
import svgr from 'vite-plugin-svgr';
import { visualizer } from 'rollup-plugin-visualizer';
 
export default ({ mode }: { mode: string }) => {
  return defineConfig({
    plugins: [
      svgr({
        svgrOptions: {
          // svgr options
        },
      }),
      react(),
      mode === 'analyze'
        ? (visualizer({
            template: 'treemap', // or sunburst, treemap, network
            open: true,
            gzipSize: true,
            brotliSize: true,
            filename: 'analyze.html', // will be saved in project's root
          }) as PluginOption)
        : [],
    ],
    resolve: {
      alias: [
        { find: '@', replacement: path.resolve(__dirname, './src') },
        {
          find: '@components',
          replacement: path.resolve(__dirname, './src/components'),
        },
      ],
    },
    build: {
      outDir: 'dist', // 빌드 결과물 출력 디렉터리
      emptyOutDir: true, // 빌드 전 outDir 디렉터리 비우기
      rollupOptions: {
        input: {
          main: '/src/main.tsx', // 엔트리 파일 지정
        },
        // 제외할 디렉터리 및 파일 패턴 설정
        external: [
          '/tests/',
          '/tests/**/*',
          '/mocks/',
          '/mocks/**/*',
          '/node_modules/**/*',
        ],
      },
    },
    test: {
      globals: true,
      environment: 'jsdom',
      setupFiles: './tests/setup.ts',
    },
  });
};
 

// 리액트 테스팅 메서드 임포트
import {render, screen} from '@testing-library/react'
// userEvent 라이브러리는 브라우저에서 사용자 상호작용이 일어났을 때 발생하는 이벤트를 디스패치하여 사용자 상호작용을 시뮬레이션합니다.
import userEvent from '@testing-library/user-event'
// jest-dom에서 커스텀 jest 매쳐를 추가합니다.
import '@testing-library/jest-dom'
// 테스트할 컴포넌트
import Fetch from './fetch'
 
test('loads and displays greeting', async () => { 
	// DOM에 리액트 엘리먼트를 렌더링합니다.
	render(<Fetch url="/greeting" />) 
	
	await userEvent.click(screen.getByText('Load Greeting')) 
	// 엘리먼트를 찾을 수 없는 경우 에러를 throw하기 전에 대기합니다.
	await screen.findByRole('heading') 
	
	// jest-dom의 커스텀 매쳐 toHaveTextContent를 사용하여 경고 메시지가 올바른지 assert합니다.
	expect(screen.getByRole('heading')).toHaveTextContent('hello there') 
	expect(screen.getByRole('button')).toBeDisabled()
})

npm install -D @vitest/ui

javascriptCopy code// .eslintrc.js
module.exports = {
// ...
  extends: [
// ...
    'plugin:vitest/recommended',
  ],
// ...
  plugins: ['vitest'],
// ...
  overrides: [
// ...
    {
      files: ['**/*.test.ts', '**/*.test.tsx'],
      plugins: ['vitest'],
      extends: ['plugin:vitest/recommended'],
      rules: {
        'vitest/no-disabled-tests': 'warn',
        'vitest/no-focused-tests': 'error',
      },
    },
  ],
// ...
}

export const getLevel = (count: number) => {
  let level: number = 0;
  if (count >= 1 && count <= 3) {
    level = 1;
  } else if (count >= 4 && count <= 6) {
    level = 2;
  } else if (count >= 7 && count <= 9) {
    level = 3;
  } else if (count >= 10) {
    level = 4;
  }
  return level;
};

describe('getLevel', () => {
 it('count가 1과 3 사이일 때 1을 반환해야 합니다', () => {
   expect(getLevel(1)).toBe(1);
   expect(getLevel(2)).toBe(1);
   expect(getLevel(3)).toBe(1);
 });
 
 it('count가 4와 6 사이일 때 2를 반환해야 합니다', () => {
   expect(getLevel(4)).toBe(2);
   expect(getLevel(5)).toBe(2);
   expect(getLevel(6)).toBe(2);
 });
 
 it('count가 7과 9 사이일 때 3을 반환해야 합니다', () => {
   expect(getLevel(7)).toBe(3);
   expect(getLevel(8)).toBe(3);
   expect(getLevel(9)).toBe(3);
 });
 
 it('count가 10 이상일 때 4를 반환해야 합니다', () => {
   expect(getLevel(10)).toBe(4);
   expect(getLevel(11)).toBe(4);
   expect(getLevel(100)).toBe(4);
 });
 
 it('count가 1 미만일 때 0을 반환해야 합니다', () => {
   expect(getLevel(0)).toBe(0);
   expect(getLevel(-1)).toBe(0);
   expect(getLevel(-100)).toBe(0);
 });
});

import { defaultInstance } from '@/apis';
import { ResponseCode } from '@/types/common/response';
import { AxiosResponse } from 'axios';
 
const fetchUserCheck = (baekjoonID: string) =>
  defaultInstance
    .get(`login?userId=${baekjoonID}`)
    .then((res: AxiosResponse<ResponseCode>) => res.data);
 
export default fetchUserCheck;
 

import fetchUserCheck from '../../src/apis/fetchUserCheck';
import { ResponseCode } from '../../src/types/common/response';
import { describe, it, expect, beforeEach, expectTypeOf } from 'vitest';
 
describe('백준 아이디 확인', () => {
  it('string 타입의 파라미터를 받는다', () => {
    return expectTypeOf(fetchUserCheck).parameter(0).toBeString();
  });
 
  it('하나의 파라미터를 받는다', () => {
    return expect(fetchUserCheck).toHaveLength(1);
  });
 
  describe('요청 성공 시', () => {
    let statusCode: ResponseCode;
 
    beforeEach(async () => {
      statusCode = await fetchUserCheck('testID');
    });
 
    it('ResponseCode 타입을 리턴한다', async () => {
      expectTypeOf(statusCode).toMatchTypeOf<ResponseCode>();
    });
 
    it('200 code 를 리턴한다', async () => {
      expect(statusCode).toBe(200);
    });
  });
 
  describe('요청 실패 시, 4xx code 를 리턴한다', () => {
    it('빈 문자열 "" 입력 시, 404 Not Found 를 리턴한다', async () => {
      let statusCode: ResponseCode = await fetchUserCheck('');
      expect(statusCode).toBe(404);
    });
    it('인수 없이 호출 시, 404 Not Found 를 리턴한다', async () => {
      // @ts-ignore
      let statusCode: ResponseCode = await fetchUserCheck();
      expect(statusCode).toBe(404);
    });
    it('존재하지 않는 ID 입력 시, 404 Not Found 를 리턴한다', async () => {
      let statusCode: ResponseCode = await fetchUserCheck('notExistId');
      expect(statusCode).toBe(404);
    });
  });
});
 

import { cn } from '@/utils/cn';
import IDefaultProps from '@/types/common/props';
 
const ValidateMessage = (props:IDefaultProps) => {
  const { className="", children } = props;
 
  return (
    <p
      className={cn(
        'absolute text-xs pt-[1px] pl-[2px] text-red-600',
        className,
      )}
    >
      {children}
    </p>
  );
};
 
export default ValidateMessage;
 

import { render, screen } from '@testing-library/react';
import ValidateMessage from '../../src/components/ValidateMessage';
 
describe('ValidateMessage 컴포넌트', () => {
  it('전달된 문자열을 렌더링한다', () => {
    const message = '유효하지 않은 입력입니다.';
    render(<ValidateMessage>{message}</ValidateMessage>);
    const renderedText = screen.getByText(message);
    expect(renderedText).toBeInTheDocument();
  });
 
  it('전달된 className이 적용된다', () => {
    const message = '유효하지 않은 입력입니다.';
    const customClass = 'custom-class';
    render(<ValidateMessage className={customClass}>{message}</ValidateMessage>);
    const renderedElement = screen.getByText(message);
    expect(renderedElement).toHaveClass(customClass);
  });
 
  it('children이 없으면 렌더링되지 않는다', () => {
    render(<ValidateMessage />);
    const renderedElement = screen.queryByText('');
    expect(renderedElement).not.toBeInTheDocument();
  });
 
  it('빈 문자열을 children으로 전달하면 빈 요소가 렌더링된다', () => {
    render(<ValidateMessage>{''}></ValidateMessage>);
    const renderedElement = screen.getByText('');
    expect(renderedElement).toBeInTheDocument();
  });
 
  it('하나의 children만 렌더링된다', () => {
    const message1 = '유효하지 않은 입력입니다.';
    const message2 = '다른 메시지입니다.';
    render(
      <ValidateMessage>
        {message1}
        {message2}
      </ValidateMessage>
    );
    const renderedElements = screen.getAllByText(
      /유효하지 않은 입력입니다.|다른 메시지입니다./
    );
    expect(renderedElements.length).toBe(1);
  });
});