React 애플리케이션 테스트: 모든 설정

소개

React 애플리케이션 테스트에 대한 보다 현대적인 접근 방식을 사용하는 방법에 대한 진행 중인 시리즈의 두 번째 부분입니다. 마지막으로 내가 선호하는 도구를 검토했습니다. 🔨

종단 간 테스트용 Cypress

단위 테스트를 위한 Vitest

당사 서비스를 조롱하는 MSW

이 게시물에서는 테스트를 시작하기 전에 모든 것을 설치하는 방법을 살펴보겠습니다.

테스트를 처음 시작할 때 이상적인 테스트 방법과 사용하기에 가장 좋은 패키지 또는 프레임워크가 무엇인지 주장하는 많은 소스로 인해 다소 어려울 수 있습니다. 그러나 테스트 프레임워크를 제대로 이해하려면 애플리케이션에서 작동하는 것을 보는 것이 중요합니다.

의사 결정 마비를 피하고 테스트를 시작하기 위해 테스트하는 방법에 대한 매우 독단적인 견해를 제공하기를 바랍니다!

테스트용 React 앱 설정

계속해서 테스트를 진행할 목적으로 베어본 애플리케이션을 만들었습니다. 여기에서 찾을 수 있습니다. 이것은 초기 상태right here의 커밋입니다.


GitHub 리포지토리 파일

버튼을 클릭하면 https://jsonplaceholder.typicode.com/posts에서 게시물을 로드하는 Vite에서 제공하는 간단한 반응 애플리케이션입니다.

다음과 같습니다.


JSON 가져오기, 멋진 것은 없습니다.

코드에 대한 간략한 개요를 제공하기 위해:

import { useState } from 'react';
import './App.css';

function App() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(false);

  const fetchPosts = async () => {
    setLoading(true);
    const response = await fetch(
    'https://jsonplaceholder.typicode.com/posts'
    );
    const json = await response.json();
    setPosts(json); 
    setLoading(false);
  };

  const clearPosts = () => {
    setPosts([]);
  };

  return (
    <div className="App">
      <header className="App-header">
    <h1>Modern React Testing</h1>
      </header>
      <main className="App-content">
    <section className="App-buttons">
      <button onClick={fetchPosts} type="button">
        Fetch Posts
      </button>
      <button onClick={clearPosts} type="button">
        Clear posts
      </button>
    </section>
    {loading && <p>Loading...</p>}
    {posts.map((post) => (
      <article key={post.id}>
        <h3>{post.title}</h3>
        <p>{post.body}</p>
      </article>
     ))}
      </main>
    </div>
  );
}

두 가지 기능이 있습니다.

fetchPosts — 엔드포인트를 호출하고 제목, 본문 및 ID가 있는 게시물을 가져옵니다. 이것은 우리 지역 주 내에서 설정됩니다

.

clearPosts - 로컬 상태를 빈 배열로 재설정합니다

.

그런 다음 이러한 게시물을 반복하여 지도 기능과 함께 표시합니다.

이 응용 프로그램이 필요한 이유는 무엇입니까?

API에 대한 요청 가져오기, 변환 및 표시는 아마도 애플리케이션 개발에서 가장 일반적인 작업일 것입니다. 이 앱을 사용하면 이러한 것들을 정확하게 테스트할 수 있습니다.

우리는 결국 MSW로 JSON 서비스를 조롱할 것입니다. Cypress로 몇 가지 종단 간 시각적 테스트를 수행하고 테스트 실행기로 테스트를 생성하는 방법을 살펴보십시오. 마지막으로 Vitest를 사용하여 개별 구성 요소 및 변환 기능에 대한 확신을 얻기 위해 몇 가지 단위 테스트를 만들 것입니다.

나는 우리에게 중요한 것에 집중하기 위해 가능한 한 단순하게 유지하려고 노력했습니다. 테스트! 💯

테스트 패키지 설정

이것은 간단한 패키지 설치입니다.

Vitest의 경우:

npm install -D vitest

사이프러스의 경우:

npm install -D cypress

MSW의 경우:

npm install -D msw

또는 한꺼번에:

npm install -D vitest cypress msw

마무리

다음은 업데이트된 커밋과 모든 패키지가 올바르게 설치된 same repository입니다.

이제 우리는 마침내 테스트 라이브러리의 복잡성에 먼저 뛰어들 준비가 되었습니다. 다음 시간에는 Vitest와 간단한 구문을 사용하는 방법에 대해 살펴보겠습니다.

읽어 주셔서 감사합니다! 더 궁금한 점이 있으면 언제든지 문의해 주세요.

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

연결하자!

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

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