Vitest 사용하기

Vitest의 경우에는 Vite를 기반으로 작동하는 테스트 프레임워크로 Jest와 호환되는 API를 제공하고 있다. Vitest의 경우 개발 환경을 설정해 놓으면 vite.config.js에 남아있어, 이후에도 계속 동일한 환경에서 테스트를 진행할 수 있다. 

 

Vitest 시작하기 

Vitest의 경우 Vite v5.0이상 그리고 Node.js v18.0.0이상이 필요하다.

// npm
npm install -D vitest

//yarn
yarn add -D vitest

//pnpm
pnpm add -D vitest

//bun
bun add -D vitest

 

이렇게 간단하게 설치가 가능하지만 Vitest를 리액트에서 사용하기 위해서는 vitest와 React Testing Library를 이용하여 패키지를 설치해야 한다. 

npm -D install @testing-library/jest-dom @testing-library/react jsdom @vitest/ui vitest

• @testing-library/jest-dom
  Jest를 확장하여 DOM에 관련된 커스텀 matcher를 제공, DOM 요소에 대한 테스트를 더 읽기 쉽고 유지 관리하기 쉽게 만든다.
  
  
• @testing-library/react
  React 컴포넌트를 테스트하기 위한 API를 제공한다.  render, screen, fireEvent 등의 유틸리티로 React 컴포넌트를 렌더링하고 상호작용을 테스트 할 수 있다.
  
  
• jsdom
  Node.js 환경에서 DOM API를 구현하여 브라우저 환경 없이도 웹 어플리케이션의 테스트를 가능하게 한다. 
  
  
• @vitest/ui
  Vitest의 테스트 결과를 시각적으로 확인하고 상호작용할 수 있는 UI를 제공한다. 

 

1. Vitest설치가 끝난 후 vite.config.js에 테스트 환경을 설정해야 한다.

CSS를 테스트한는 경우 특정 스타일이 변경될 때 테스트가 실패하는 등이 발생할 수 있어 일반적으로는 테스트 환경에서 비활성화 하는 것이 좋다. 

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test : {
    globals : true,
    environment : "jsdom",
    setupFiles : "./src/setupTest.js",
    css: true, // CSS는 비활성화를 권장한다.
  },
});

 

2. src 폴더 안에 setupTest.js를 생성한다.

//setupTest.js
import "@testing-library/jest-dom"

3. package.json 에 "test" : "vitest"를 작성한다.

Vitest 사용하기

//Comp01.jsx

export default function Comp01(){
    return(
        <div>
            <h1>코딩쥐의 티스토리</h1>
            <p> name : codingji </p>
            <p> url : coding-ji.tistory.com </p>
        </div>
    )
}

 

1. 테스트 파일 생성

(1) 테스트할파일명.test.jsx (리액트 파일)을 생성하여, 테스트 할 파일을 import로 가져온다.

//Comp01.test.jsx

import Comp01 from "./Comp01";

 

(2) 테스트 할 내용을 작성한다.

• test : 실질적인 테스트를 수행하는 함수
• render : 리액트 컴포넌트를 가상으로 렌더링한다. 
• screen : 렌더링된 컴포넌트 내의 DOM 요소를 쉽게 선택할 수 있게 한다.
  • getByText, getByRole, getByLabelText 등의 메서드를 사용하여 원하는 요소를 찾을 수 있다. 

• expect : 예상하는 바에 대해서 정의하는 함수, matcher를 사용하여 실제 결과와 비교한다. 

render와 screen의 경우 @testing-library/jest-dom에서 제공하고, test와 expect의 경우 vitest에서 제공한다.

//Comp01.test.jsx

import Comp01 from "./Comp01";
import {render, screen} from '@testing-library/react';
import {test, expect} from 'vitest';

test("Comp01에 '코딩쥐의 티스토리'라는 제목이 있다.", () => {
    // Comp01 컴포넌트를 렌더링
    render(<Comp01/>);

    // 코딩쥐의 티스토리라는 컨텐츠가 있는지 확인
    const h1El = screen.getByText(/코딩쥐의 티스토리/);

    // 문서 안에 h1El이 존재하는지 확인
    expect(h1El).toBeInTheDocument();
})

2. 테스트 시행

Vitest가 test 스크립트를 찾아 실행한다. 테스트 결과는 콘솔에 출력되어, 어떤 테스트가 통과하고 어떤 테스트가 실패했는지 확인할 수 있다.

npm test

 

특정 테스트 파일을 실행하고 싶을 때는 npm test 테스트파일.test.jsx 로 시행하면 된다.