> 웹 프론트엔드 > JS 튜토리얼 > Jest로 JavaScript 앱 테스트

Jest로 JavaScript 앱 테스트

WBOY
풀어 주다: 2024-08-13 06:37:28
원래의
804명이 탐색했습니다.

Test Your JavaScript App With Jest

테스트는 애플리케이션이 예상대로 작동하는지 확인하는 소프트웨어 개발의 중요한 부분입니다. JavaScript 생태계에서 가장 인기 있는 테스트 프레임워크 중 하나는 Jest입니다. Facebook에서 개발한 Jest는 단순성과 사용 용이성으로 잘 알려져 있어 초보자와 숙련된 개발자 모두에게 탁월한 선택입니다.

Jest 시작하기

예제를 살펴보기 전에 프로젝트에 Jest를 설정해 보겠습니다. 아직 설치하지 않았다면 npm을 사용하여 설치할 수 있습니다.

npm install --save-dev jest
로그인 후 복사

다음으로 package.json에 테스트 스크립트를 추가합니다.

"scripts": {
  "test": "jest"
}
로그인 후 복사

이제 테스트를 작성할 준비가 되었습니다!
테스트할 간단한 함수를 만들어 보겠습니다. math.js라는 파일을 만듭니다.

// math.js
function add(a, b) {
  return a + b;
}
module.exports = add;
로그인 후 복사

이제 이 함수에 대한 테스트를 작성해 보겠습니다. math.test.js라는 파일을 만듭니다.

// math.test.js
const add = require('./math');

test('adds 1 + 2 to equal 3', () => {
  expect(add(1, 2)).toBe(3);
});
로그인 후 복사

이 테스트에서는 테스트 함수를 사용하여 테스트 사례를 정의합니다. Expect 함수는 add(1, 2)의 결과가 3과 같다고 주장하는 데 사용됩니다.

테스트 실행

터미널에서 다음 명령을 실행하여 테스트를 실행할 수 있습니다.

npm test
로그인 후 복사

테스트가 통과되었다는 출력이 표시됩니다.

비동기 코드 테스트

Jest는 비동기 코드 테스트도 지원합니다. 비동기 함수를 포함하도록 math.js 파일을 수정해 보겠습니다.

// math.js
function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('peanut butter');
    }, 1000);
  });
}

module.exports = { add, fetchData };
로그인 후 복사

이제 fetchData에 대한 테스트를 작성해 보겠습니다.

// math.test.js
const { add, fetchData } = require('./math');

test('adds 1 + 2 to equal 3', () => {
  expect(add(1, 2)).toBe(3);
});

test('fetches data', async () => {
  const data = await fetchData();
  expect(data).toBe('peanut butter');
});
로그인 후 복사

이 테스트에서는 테스트 기능을 비동기로 표시하고 Wait를 사용하여 Promise가 해결될 때까지 기다립니다.

모의 기능

Jest는 강력한 조롱 기능을 제공합니다. API를 호출하는 함수가 있다고 가정해 보겠습니다. 이 함수를 모의하여 테스트 중에 동작을 제어할 수 있습니다.
예는 다음과 같습니다.

// api.js
const axios = require('axios');

async function getUser() {
  const response = await axios.get('https://api.example.com/user');
  return response.data;
}

module.exports = getUser;
로그인 후 복사

테스트에서 Axios를 모의할 수 있습니다.

// api.test.js
const axios = require('axios');
const getUser = require('./api');

jest.mock('axios');

test('fetches user data', async () => {
  const user = { name: 'John Doe' };
  axios.get.mockResolvedValue({ data: user });

  const result = await getUser();
  expect(result).toEqual(user);
});
로그인 후 복사

이 테스트에서는 axios.get 메소드를 모의하여 사전 정의된 응답을 반환하므로 실제 API 호출 없이 getUser를 테스트할 수 있습니다.

Jest는 JavaScript 애플리케이션에 대한 테스트를 쉽게 작성하고 실행할 수 있게 해주는 강력한 테스트 프레임워크입니다. 간단한 구문, 비동기 코드 지원 및 내장된 모의 기능을 통해 Jest는 코드가 안정적이고 유지 관리 가능하도록 보장할 수 있습니다. 지금 바로 Jest를 프로젝트에 통합하고 자동화된 테스트의 이점을 누려보세요.

위 내용은 Jest로 JavaScript 앱 테스트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿