테스트 코드 React

[Dolphin-PC]

• [x] 테스트 코드 React
  • Jest와 React Testing Library를 사용하여 주요 기능 및 UI 컴포넌트에 대한 테스트 케이스 구현.
    • 로그인 / 회원가입 또는 게시글 작성 / 상품 구매등의 사용되는 Form 컴포넌트 테스트 코드 작성

[Dolphin-PC]

📌 Vitest

• 참고 : https://www.daleseo.com/vitest/
• 선정이유
  • 테스트를 하기 위해서는 몇몇 설정 작업들이 필요하다.
  • 기존 CRA환경에서는 jest가 내장되어 있었지만, vite환경에서는 설정작업들이 필요하다.
  • 고로, vite를 사용할떄는 테스트 설정 보일러플레이트가 적은 vitest 를 사용하여, 설정의 스트레스를 줄이고 코드를 빠르게 작성하는 것이 더 좋다고 생각했다.

[Dolphin-PC]

💥 React is not defined

---

해결

• vitest 는 vitest.config.ts가 없다면 ,vite.config.ts로 설정을 진행한다.
• 이때 나는 vitest.config.ts 파일안에, plugins : [] 로 되어있었는데, 이게 문제였던듯 하다.
• 그래서 그냥, vitest.config.ts파일을 삭제하고, vite.config.ts파일을 아래와 같이 수정했다.

  
  import { defineConfig, InlineConfig, UserConfig } from "vite";
  import react from "@vitejs/plugin-react-swc";
  import svgr from "vite-plugin-svgr";
  import path from "path";

interface VitestConfigExport extends UserConfig { test: InlineConfig; }

// https://vitejs.dev/config/ export default defineConfig({ plugins: [react(), svgr()], test: { globals: true, environment: "jsdom", setupFiles: "./src/test/setup.ts", }, resolve: { alias: { "@": path.resolve(__dirname, "./src"), }, }, } as VitestConfigExport);

[Dolphin-PC]

💥 Router Component

• 대부분의 React컴포넌트는 Router컴포넌트 하위의 컴포넌트이기에, Router가 주입이 되지 않았다면, useNavigate와 같은 hook을 사용할 수 없어 오류가 발생했다.

• 이를 해결하기 위해, util 함수를 만들어 해결할 수 있다.

  
  // test-util.tsx
  import { ReactNode } from "react";
  import { render } from "@testing-library/react";
  import { BrowserRouter } from "react-router-dom";
  import userEvent from "@testing-library/user-event";

export * from "@testing-library/react";

/**

• @desc 라우터를 사용하는 테스트 렌더링
• @param ui 보일 컴포넌트
• @param {route} route 라우터 경로

• @see https://testing-library.com/docs/example-react-router/#reducing-boilerplate */ export const renderWithRouter = (ui: ReactNode, { route = "/" } = {}) => { window.history.pushState({}, "Test page", route);

  return { user: userEvent.setup(), ...render(ui, { wrapper: BrowserRouter }), }; };

- 이를 이용해서, 사용한다면 아래와 같이 렌더링 할떄 오류가 발생하지 않는다.
![image](https://github.com/user-attachments/assets/7c475dcf-0fef-4743-8b25-82909339d42c)

[Dolphin-PC]

📏 렌더링 시간 측정

• 데이터 100,000개 렌더링 테스트

  • Windowing 적용전 (렌더링 시간 976ms)

  • Windowing 적용후 (렌더링 시간 16ms)