React 테스트를 위해 Jest를 설정하는 방법은 무엇입니까?
게시 됨: 2023-07-26점점 더 많은 개발자가 선택한 프런트 엔드 프레임워크로 React를 채택함에 따라 우리가 작성하는 코드의 품질이 최고인지 확인하는 것이 점점 더 중요해지고 있습니다. 품질 보증의 한 가지 중요한 측면은 테스트이며 Jest는 React와 함께 자주 사용되는 인기 있는 테스트 프레임워크입니다.
Jest는 Facebook에서 구축한 오픈 소스 테스트 프레임워크이며 JavaScript 코드를 가능한 한 쉽고 효율적으로 테스트할 수 있도록 설계되었습니다. 빠르고 사용하기 쉬운 API가 있으며 테스트를 쉽게 만들어주는 여러 가지 기본 제공 기능이 함께 제공됩니다.
이 기사에서는 React 테스트를 위해 Jest를 설정하는 과정을 안내합니다. Jest 설치부터 첫 번째 테스트 케이스 작성까지 시작하기 위해 알아야 할 모든 것을 다룰 것입니다.
반응 테스트를 위한 Jest
Jest는 React 애플리케이션을 테스트하는 데 사용되는 인기 있는 테스트 프레임워크입니다. Facebook에서 만들었으며 사용 편의성과 빠른 설정 시간으로 유명합니다. Jest는 즉시 React와 함께 작동하도록 설계되었으며 테스트를 더 쉽게 해주는 많은 기능을 제공합니다.
다음은 Jest를 React 애플리케이션 테스트를 위한 인기 있는 선택으로 만드는 몇 가지 기능입니다.
i) 스냅샷 테스트: Jest는 구성 요소의 현재 출력을 이전에 저장된 스냅샷과 비교할 수 있는 스냅샷 테스트 기능을 제공합니다. 이렇게 하면 구성 요소의 출력에 의도하지 않은 변경이 있었는지 쉽게 확인할 수 있습니다.
ii) 모킹: Jest는 모의 함수와 모듈을 만들 수 있는 내장 모킹 기능을 제공합니다. 이는 쉽게 사용할 수 없거나 테스트하기 어려운 함수 또는 모듈의 동작을 시뮬레이션해야 할 때 유용합니다.
iii) 코드 적용 범위: Jest는 테스트에서 적용되는 코드의 백분율을 보여주는 코드 적용 범위 보고서를 제공합니다. 이는 테스트되지 않았으며 추가적인 주의가 필요할 수 있는 코드 영역을 식별하는 데 유용합니다.
iv) 비동기 테스트: Jest는 비동기 코드 관리를 위한 유틸리티를 제공하여 비동기 코드를 쉽게 테스트할 수 있도록 합니다. 이렇게 하면 어설션을 만들기 전에 약속 또는 다른 비동기 코드가 해결되기를 기다리는 테스트를 작성할 수 있습니다.
v) 손쉬운 설정: Jest는 React 애플리케이션을 설정하고 구성하기 쉽습니다. 즉시 사용할 수 있는 기본 구성과 함께 제공되지만 특정 요구 사항에 맞게 사용자 지정할 수 있습니다.
전반적으로 Jest는 React 애플리케이션을 쉽게 테스트할 수 있는 강력하고 유연한 테스트 프레임워크입니다. 많은 기능과 쉬운 설정으로 인해 React 구성 요소에 대한 신뢰할 수 있는 테스트를 작성하려는 개발자에게 인기 있는 선택입니다.
React 테스트를 위한 Jest 설정
2023년에 React 테스트를 위해 Jest를 설정하기 위해 따라야 할 특정 단계가 있습니다.
1) 제스트 설치
Jest는 npm 또는 yarn을 사용하여 프로젝트에 설치할 수 있습니다. 다음은 npm을 사용하여 Jest를 설치하는 단계입니다.
i) 터미널 또는 명령 프롬프트를 열고 프로젝트 디렉토리로 이동합니다.
ii) 다음 명령을 실행하여 Jest를 프로젝트의 개발 종속성으로 설치합니다.
npm install –save-dev jest
이 명령은 Jest를 설치하고 devDependencies 섹션 아래 프로젝트의 package.json 파일에 추가합니다.
설치가 완료되면 Jest를 사용하여 테스트 작성을 시작할 수 있습니다. npm test 명령을 사용하여 테스트를 실행할 수 있습니다. 기본적으로 Jest는 .test.js 또는 .spec.js 확장자로 명명된 테스트 파일을 찾습니다. 그러나 Jest 구성 파일에서 testMatch 속성을 수정하여 다른 확장이 있는 테스트를 찾도록 Jest를 구성할 수 있습니다.
그게 다야! 이제 프로젝트에 Jest가 설치되었으며 애플리케이션에 대한 테스트 작성을 시작할 수 있습니다.
2) 구성 파일 생성
Jest용 구성 파일을 만들려면 프로젝트의 루트 디렉터리에 jest.config.js 라는 파일을 만들 수 있습니다. 이 파일에는 테스트를 실행할 때 Jest가 사용해야 하는 구성 옵션이 포함됩니다.
다음은 예제 구성 파일입니다.
모듈.내보내기 = {
// 테스트 파일로 간주해야 하는 파일 형식을 나타냅니다.
테스트 매치: [
'**/__tests__/**/*.js?(x)',
'**/?(*.)+(spec|test).js?(x)'
],
// Jest가 파일을 검색하는 데 사용해야 하는 디렉토리 경로 목록입니다.
뿌리: ['<rootDir>/src'],
// 정규 표현식에서 변환기 경로로의 맵.
변환: {
'^.+\\.(js|jsx|ts|tsx)$': '바벨-제스트'
},
// Jest가 테스트 파일을 감지하는 데 사용하는 glob 패턴입니다.
testPathIgnorePatterns: [
'<rootDir>/node_modules/',
'<rootDir>/build/'
],
// 커버리지 보고서를 작성할 때 Jest가 사용하는 리포터 이름 목록입니다.
coverageReporters: ['json', '텍스트', 'html'],
// 모듈에서 사용하는 파일 확장자의 배열입니다.
moduleFileExtensions: ['js', 'json', 'jsx']
};
이 예제 구성 파일은 다음 옵션을 지정합니다.
a) testMatch: 테스트 파일을 식별하는 데 사용되는 패턴을 지정합니다.
b) root: Jest가 파일을 찾아야 하는 디렉토리를 지정합니다.
c) 변환: 테스트를 실행하기 전에 Jest가 파일에 적용해야 하는 변환을 지정합니다.
d) testPathIgnorePatterns: 테스트 파일을 검색할 때 무시할 패턴을 지정합니다.
e) coverageReporters: Jest가 커버리지 보고서를 생성하는 데 사용해야 하는 리포터를 지정합니다.
f) moduleFileExtensions: Jest가 파일을 검색할 때 찾아야 하는 파일 확장자를 지정합니다.
프로젝트의 필요에 맞게 이 구성 파일을 수정할 수 있습니다. 구성 파일을 생성하면 Jest는 프로젝트에서 테스트를 실행할 때 자동으로 이 파일을 사용합니다.
3) 테스트 작성
Jest가 설치되고 구성 파일이 설정되면 React 애플리케이션에 대한 테스트 작성을 시작할 수 있습니다. 테스트 파일을 만들고 테스트를 작성하는 단계는 다음과 같습니다.
i) 확장자가 .test.js 또는 .spec.js 인 새 파일을 만듭니다. 이것이 테스트 파일이 됩니다.
ii) 테스트 파일에서 테스트하려는 구성 요소 또는 기능을 가져옵니다.
import { sum } from './myFunctions';
iii) 테스트를 작성합니다. 테스트는 Jest API를 사용하여 구성 요소 또는 기능이 예상대로 작동하는지 확인하는 기능입니다.
설명('합계', () => {
test('1 + 2를 더하면 3이 됩니다', () => {
기대(합계(1, 2)).toBe(3);
});
});
이 예에서는 두 개의 숫자를 더하는 간단한 sum 함수를 테스트하고 있습니다. describe 함수는 관련 테스트를 함께 그룹화하고 test 함수는 단일 테스트 사례를 지정합니다. expect 함수는 sum 함수가 예상 값을 반환하는지 확인합니다.
iv) 프로젝트 디렉터리에서 npm test 명령을 실행하여 테스트를 실행합니다. Jest는 프로젝트에서 테스트 파일을 검색하고 찾은 테스트를 실행합니다.
구성 요소 또는 함수의 모든 기능을 포함하는 데 필요한 만큼 테스트를 추가할 수 있습니다. Jest는 보다 복잡한 테스트를 생성하는 데 사용할 수 있는 다양한 일치 및 기타 유틸리티를 제공합니다.
React 애플리케이션에 대한 테스트를 작성하면 코드가 예상대로 작동하는지 확인하고 코드베이스를 변경할 때 회귀를 방지할 수 있습니다.
4) 테스트 실행
Jest를 사용하여 테스트를 실행하려면 프로젝트 디렉토리에서 npm test 명령을 사용할 수 있습니다. Jest는 Jest 구성 파일에 지정된 패턴과 일치하는 프로젝트의 모든 테스트 파일을 자동으로 감지하고 실행합니다.
npm 테스트를 실행하면 Jest가 콘솔에서 테스트 결과를 출력합니다. 모든 테스트가 통과하면 Jest는 테스트 결과 요약을 표시합니다.
패스 src/components/Example.test.js
✓ 충돌 없이 렌더링(21ms)
테스트 스위트: 1개 통과, 총 1개
테스트: 1개 통과, 총 1개
스냅샷: 총 0개
시간: 3.204초, 예상 4초
모든 테스트 스위트를 실행했습니다.
테스트가 실패하면 Jest는 실패와 실패한 테스트의 위치를 설명하는 오류 메시지를 표시합니다.
실패 src/components/Example.test.js
- 예제 구성 요소 › 충돌 없이 렌더링
TypeError: 정의되지 않은 'map' 속성을 읽을 수 없습니다.
10 | 렌더() {
11 | const { 항목 } = this.props;
> 12 | return items.map(item => <div key={item.id}>{item.name}</div>);
| ^^
13 | }
14 | }
15 |
Example.render(src/components/Example.js:12:17)에서
ReactTestRenderer.render에서 (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1052:32)
Object.<anonymous>에서 (src/components/Example.test.js:9:16)
테스트 스위트: 1개 실패, 총 1개
테스트: 1개 실패, 총 1개
스냅샷: 총 0개
시간: 3.537초, 예상 4초
모든 테스트 스위트를 실행했습니다.
Jest는 또한 감시 모드에서 테스트 실행, 코드 커버리지 보고서 생성 등과 같은 테스트 동작을 사용자 지정하는 데 사용할 수 있는 다양한 옵션을 제공합니다. Jest 문서에서 이러한 옵션에 대한 자세한 정보를 찾을 수 있습니다.
마무리
LambdaTest는 Jest와 함께 사용하여 React 애플리케이션을 테스트할 수 있는 강력한 클라우드 기반 테스트 플랫폼입니다. LambdaTest의 클라우드 기반 인프라의 확장성을 활용하면 다양한 브라우저와 장치에서 Jest 테스트를 빠르고 효율적으로 실행할 수 있으므로 애플리케이션이 다양한 환경에서 예상대로 작동하는지 확인할 수 있습니다.
이 블로그에서는 React 애플리케이션 테스트를 위해 Jest를 설정하는 데 필요한 단계를 다루었습니다. 또한 LambdaTest를 테스트 환경으로 사용하고, Jest를 사용하여 테스트를 작성하고, LambdaTest의 클라우드 기반 인프라에서 테스트를 실행하도록 Jest를 구성하는 방법도 배웠습니다.
LambdaTest와 Jest를 함께 사용하면 React 개발자를 위한 강력한 테스트 솔루션을 제공하여 개발 주기 초기에 회귀 및 버그를 포착하여 애플리케이션의 전반적인 품질을 개선할 수 있습니다.
따라서 React 테스트 워크플로를 간소화하려는 경우 LambdaTest와 Jest를 함께 사용하여 React 애플리케이션에 대한 포괄적이고 확장 가능하며 효율적인 테스트를 달성하는 것이 좋습니다.