React 애플리케이션 테스트: Vitest란 무엇입니까?

소개

Vitest는 "엄청나게 빠른"단위 테스트 프레임워크입니다. 오늘은 vitest를 설정하는 방법과 작동 방식에 대한 간략한 설명을 살펴보겠습니다. 명확히 하기 위해, 이것은 React 애플리케이션에 대한 최신 테스트 전략을 다루는 시리즈의 세 번째 기사입니다.

단위 테스트란 무엇입니까?

A unit test is a testing method for an isolated and individual piece of code, a unit . In the context of React, this more than likely refers to testing our components in isolation and any associated functions.

이를 염두에 두고 vitest의 최종 목표는 나머지 응용 프로그램 및 테스트 핵심 기능과 격리된 React 구성 요소 또는 기능을 렌더링하는 것입니다. 원하는 경우 코드 단위만 테스트합니다.



그러나 이것이 왜 그렇게 중요합니까? 글쎄, 테스트는 우리가 변경을 할 때마다 우리가 아무것도 깨지지 않았다는 확신을 줍니다. 물론, 코드가 만지는 모든 것과 그것이 생산 중인 코드에 어떤 영향을 미칠 수 있는지에 대해 모호한 지식을 가질 수 있습니다.

그러나 모든 개발자가 알려줄 것입니다. 충분하지 않다. 상황이 발생하고 엣지 케이스가 있습니다. 팀의 개발자가 코드에 익숙하지 않을 수 있는 팀에 있는 경우 더욱 그렇습니다.

그들은 또한 문서의 한 형태로 사용됩니다. 테스트를 통해 읽으면 개발자는 코드 블록의 의도된 목적이 무엇인지 알 수 있습니다. 그 방법으로 Vitest를 사용하십시오.

구성

다른 많은 라이브러리와 마찬가지로 프로젝트의 루트에 구성 파일이 있습니다. 프로젝트가 이미 Vite에서 실행 중인 경우 vite.config.ts 파일을 찾습니다.

비록 우리의 테스트 애플리케이션(이것이 당신이 읽고 있는 첫 번째 기사라면 우리가 vitest를 테스트하기 위해 구축한 베어본 사이트가 있으므로 second part을 확인하십시오 😎)

import { defineConfig } from 'vitest/config' 

export default defineConfig({ 
    test: { 
      // ... 
    }, 
})

여기에서 모니터링할 파일 glob, 필요한 종속성, 환경(예: nodejs, jsdom 또는 happy-dom을 사용하려는 경우)을 설정할 수 있습니다. 이 부분이 왜 그렇게 중요한가요? 글쎄, 그것은 우리의 단위 테스트가 실행되는 곳을 조롱합니다.

웹 애플리케이션의 경우 jsdom 또는 happy-dom을 사용하는 것이 브라우저와 더 유사하므로 더 나은 선택일 수 있습니다. 그것으로 가자.



가능한 구성의 전체 목록을 찾을 수 있습니다here.

현재 코드에는 프로젝트의 루트에 있는 vitest.config.js 파일만 있습니다.

import { defineConfig } from 'vitest/config'; 

export default defineConfig({ 
    test: { 
        environment: 'jsdom', 
     }, 
});

명령

테스트 및 설명

테스트 파일을 처음 열면 test와 describe라는 두 키워드 중 하나가 표시됩니다.

test는 테스트를 생성하는 함수입니다. vitest 테스트 러너는 실행할 테스트를 확인하기 위해 이 구문을 찾습니다.



테스트는 우리의 키워드입니다. 녹색 텍스트는 테스트 설명이며 테스트 실행을 볼 때 터미널에서 테스트를 식별하는 방법입니다. 다음 함수에는 실제 테스트 내용이 포함되어 있습니다. 나중에 자세히 설명합니다.

describe는 우리 조직을 위한 것입니다. 파일 내부에 일련의 테스트를 선언할 수 있습니다. 일반적으로 파일은 자체 제품군입니다.



그 구조는 테스트와 매우 유사합니다.



describe 함수 안에 테스트를 넣을 수 있습니다.

예상하다

기대는 우리 테스트의 가장 중요한 부분입니다. 이것이 우리가 테스트 결과를 기대하는 것입니다. 예를 들어 간단한 수학을 수행하는 경우:

const two = 1 + 1; 

expect(two).to.equal(2) 
expect(two).toBe(2)

테스트는 예상 함수에 따라 성공 또는 실패를 반환합니다.

매우 이해하기 쉽습니다. 그러나 우리는 단지 동등한 것에 국한되지 않고 수많은 기대 기능이 있습니다. 전체 목록here을 찾으십시오.

전후

테스트 전후에 실행해야 하는 일반적인 작업이 있는 경우 Vitest는 이후 및 이전 키워드를 제공합니다.

beforeEach(() => {}); 

afterEach(() => {});

마무리

Vitest에는 놀라운 단위 테스트를 생성할 수 있는 수많은 내장 기능이 있습니다. 다음 기사에서는 베어본 애플리케이션을 사용하여 테스트 애플리케이션을 만드는 방법을 살펴보겠습니다. 🚀

자세한 내용은 Relatable Code에서 확인하세요.

연결하자

이 내용이 마음에 드셨다면 언제든지 저에게 연락하거나

내newsletter에서 내 무료 개발자 로드맵과 주간 기술 산업 뉴스를 확인하십시오.