Vite 환경에서의 테스트 프레임워크인 Vitest ✏️❗

---

💜Vitest 세팅

⚡1. vitest 설치

yarn add -D vitest

⚡2. package.json에 추가

{
  "scripts": {
    "test": "vitest"
  }
}

⚡3. vitest 설정

• vite 환경에서는 vite.config.ts로 설정
• vite 환경이 아닐 시 vitest.config.ts로 설정
• vitest와 관련된 설정을 추가하거나 플러그인을 연결해서 테스트 실행 환경을 원하는 방식대로 커스텀

⚡4. 이름 설정, 폴더 구조

• src/test 폴더 안에 example.test.ts 형식으로 테스트 파일 작성
• 혹은 테스트할 함수, 컴포넌트와 같은 폴더에 작성

---

💜Unit Test 사용 예시

⚡함수 test

• 함수

// sum.ts
export function sum(a: number, b: number): number {
  return a + b;
}

• test 파일

// sum.test.ts
import { expect, test } from 'vitest';
import { sum } from '../sum';

test('덧셈 테스트 1 + 2 = 3', () => {
  expect(sum(1, 2)).toBe(3);
});

설명

• test()
  • 테스트 케이스를 정의하는 함수
  • 특정 조건에 대한 테스트를 실행하며, 예상된 결과를 검증
• expect()
  • 테스트할 값에 대한 예상 값 설정
  • 다양한 매처(matcher) 함수와 함께 사용되어 값을 특정 조건과 비교하고 테스트의 결과 평가
• toBe()
  • 값을 비교하기 위한 매처 함수로, expect 함수와 함께 사용
  • 정확한 값과 데이터 타입이 일치하는지를 확인하여 예상 값과 실제 값 비교

결과

yarn test

⚡컴포넌트 test

컴포넌트 test 위한 세팅

• React 구성 요소를 테스트하므로 jsdom 과 같은 라이브러리를 사용하여 Vitest에서 HTML 활성화 필요

yarn add jsdom

• vite.config.ts 파일 설정

import { InlineConfig, UserConfig, defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

interface VitestConfigExport extends UserConfig {
  test: InlineConfig;
}

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
  },
} as VitestConfigExport);

• 필요한 라이브러리 설치

- React 테스팅 라이브러리
yarn add @testing-library/react
- 테스트 실행을 위한 DOM 환경 라이브러리
yarn add @testing-library/jest-dom
- 유저가 발생시키는 이벤트 테스트를 위한 라이브러리
yarn add @testing-library/user-event

• /test/setup.ts 에 setup 파일 생성
  • @testing-library/jest-dom 는 Jest를 통해 테스팅을 할때 DOM에 대한 매처(matcher)와 유틸리티 함수 제공해주는 라이브러리
  • @testing-library/jest-dom/vitest 는 위 라이브러리의 vitest 버전
  • vitest에서도 jest-dom의 매처들과 유틸리티 함수를 사용

// setup.ts
import '@testing-library/jest-dom/vitest';

• vite.config.ts 파일 설정

...
test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/tests/setup.js',
  },
...

컴포넌트 test

• 컴포넌트

type InputProps = {
  label: string;
  name: string;
} & React.DetailedHTMLProps<
  React.InputHTMLAttributes<HTMLInputElement>,
  HTMLInputElement
>;

export function Input({ label, name, ...props }: InputProps) {
  return (
    <>
      <label htmlFor={name}>{label}</label>
      <input name={name} id={name} {...props} />
    </>
  );
}

• test 파일

import { describe, expect, it } from 'vitest';
import { Input } from '../components/Input';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

describe('Input', async () => {
  it('Input 컴포넌트 렌더링', () => {
    // render() : <Input /> 렌더링
    render(
      <Input
        name='email'
        type='email'
        placeholder='Email'
        label='Email Address'
      />
    );
    // 'Email Address' 텍스트를 포함한 요소가 화면에 존재하는지 검증
    expect(screen.getByText('Email Address')).toBeInTheDocument();
    // 'email address'라는 라벨을 가진 텍스트박스(role이 textbox인 요소)가 화면에 존재하는지를 검증
    // toBeInTheDocument() : 특정 요소가 문서 안에 존재하는지를 테스트
    expect(
      screen.getByRole('textbox', {
        name: /email address/i,
      })
    ).toBeInTheDocument();
  });

  // 특정 입력 요소의 값을 변경하는지를 테스트
  it('Input 값 변경', async () => {
    render(
      <Input
        name='email'
        type='email'
        placeholder='Email'
        label='Email Address'
      />
    );

    const input = screen.getByRole('textbox', {
      name: /email address/i,
    });

    // userEvent.type()을 사용하여 input 요소에 '1234' 값 입력
    await userEvent.type(input, '1234');
    // 해당 input 요소의 값이 '1234'인지 확인
    expect(input).toHaveValue('1234');
  });

설명

• describe()
  • 테스트 스위트를 그룹화하고 각 테스트 케이스 정의
• it()
  • 실제 테스트를 정의하는 함수

결과