jest configuration debugging jest based tests
Jest Config, 디버깅 및 Jest를 다른 JavaScript 테스트 프레임 워크, 특히 Jest vs Mocha & Jest vs Jasmine과 비교하는 방법에 대해 알아보십시오.
이것에 유익한 Jest 시리즈 , 우리는 Jest를 사용하여 React Apps, Mocks 및 Spies 테스트 지난 튜토리얼에서.
이 튜토리얼에서는 Jest Config 파일에 대해 자세히 알아보고 하나 이상의 여러 테스트 문제를 해결하기 위해 실제로 Jest 테스트를 디버깅하는 방법을 알아 봅니다.
또한 프로젝트에서 독립적으로 설정할 수 있거나 package.json 구성 자체의 일부로 추가 할 수있는 Jest Config 파일에서 일반적으로 사용되는 몇 가지 옵션을 살펴 봅니다.
Jest 테스트를 작성하기 위해 Visual Studio Code를 사용하고 VS Code의 확장 또는 플러그인을 사용하여 Jest 테스트에 대한 디버깅 지원을 활성화합니다.
또한 Mocha 및 Jasmine과 같은 다양한 Javascript 테스트 프레임 워크를 Jest와 비교하고 서로의 장단점을 이해합니다.
학습 내용 :
다음 중 시스템 테스트 상태가 아닌 것은 무엇입니까?
구성이 있습니다
Jest 구성은 3 가지 방법으로 지정할 수 있습니다.
- package.json 파일의 키를 통해.
- jest.config.js 파일을 통해 – 모듈로 작성된 구성 파일.
- -config 플래그로 옵션과 함께 사용할 수있는 JSON을 통해.
위의 모든 접근 방식으로 동일한 결과를 얻을 수 있습니다. 첫 번째 단계, 즉 package.json 파일의 키를 통해 Jest 구성 추가를 살펴 보겠습니다.
기존 package.json 파일에서 'jest'라는 새 키를 추가합니다. 이것은 JSON 형식의 키-값 쌍 집합 일뿐입니다. Jest와 관련된 모든 구성 옵션은 package.json 파일의이 섹션에 추가 할 수 있습니다.
가장 자주 사용되는 구성 옵션은 다음과 같습니다.
# 1) 커버리지 관련
collectCoverage, coverageThreshold, coverageReporters, coverageDirectory – 가장 널리 사용되는 옵션입니다. 커버리지는 중요한 지표이며 코드가 미리 설정된 임계 값에 대해 테스트되도록합니다.
각각에 대한 자세한 설명은 다음과 같습니다.
# 1) collectCoverage : 이 옵션은 Jest 테스트 실행자가 Coverage 정보를 수집 할 것인지 여부를 지정하는 데 사용됩니다. true로 설정하면 Jest 러너가 커버리지 정보를 수집합니다. 이 옵션을 사용하면 아래와 같이 테스트 실행이 끝날 때 커버리지가 수집되어 콘솔에 표시됩니다.
# 2) coverageThreshold : 이 설정을 사용하면 백분율로 적용 범위에 대한 임계 값을 지정할 수 있습니다. 이는 조직이나 팀이 코드를 메인 브랜치로 푸시하거나 병합 할 수없는 특정 최소 커버리지 값을 준수하고자 할 때 매우 유용합니다.
이것이 어떻게 사용될 수 있는지 봅시다.
적용 범위는 전역 수준, 파일 수준 또는 기타 정규식에서 지정할 수 있습니다. 전역 수준에서 지정되면 지정된 모든 임계 값이 프로젝트의 결합 된 모든 파일에 대해 일치해야합니다.
'coverageThreshold': { 'global': { 'branches':95, 'functions':100, 'lines':70, 'statements':-2 } } 'global'을 filename 또는 regex로 변경하여 파일 수준에서 적용 범위를 지정할 수도 있습니다. 임계 값 구성은 요구 사항에 따라 다를 수 있습니다.
'coverageThreshold': { './src/calculator.js': { 'branches':100, 'functions':100, 'lines':100, 'statements':-10 } } # 3) coverageReporters : 이 구성은 커버리지 보고서를 생성하기 위해 사용할 리포터를 지정하는 데 사용됩니다. 테스트 실행이 끝날 때 커버리지 보고서를 생성하는 데 사용할 수있는 NPM 패키지로 사용할 수있는 기존 리포터가 많이 있습니다.
# 4) coverageDirectory : 이 설정을 통해 사용자는 커버리지 보고서가 생성 된 후 저장되거나 유지되어야하는 디렉터리를 지정할 수 있습니다.
다음은 모든 적용 범위 관련 구성 설정을 사용하는 결합 된 예입니다.
'jest':{ 'collectCoverage':true, 'coverageThreshold': { 'global': { 'branches':95, 'functions':100, 'lines':70, 'statements':-2 }, './src/calculator.js': { 'branches':100, 'functions':100, 'lines':100, 'statements':-10 } }, 'coverageReporters': ( 'lcov','text' ), 'coverageDirectory': './output/code-coverage/' } 여기서는 lcov 및 text.Lcov와 같은 2 개의 커버리지 리포터를 사용했습니다 .Lcov는 Linux의 라인 커버리지이며 기본적으로 존재하며 '텍스트'리포터는 커버리지 출력도 콘솔에 표시됨을 의미합니다. 커버리지 보고서는 'coverageDirectory'설정에 지정된 경로에서 생성됩니다.
# 2) 모의 관련
모의는 Jest로 테스트하는 동안 많이 사용됩니다. 아래의 구성 옵션을 사용하면 쉽게 구성하고 모의 항목을 지울 수 있습니다.
- autoMocks : true로 설정하면 기본적으로 테스트에서 가져온 모든 모듈을 모의합니다.
- clearMocks : true로 설정하면 각 테스트 후 모의 설정 / 모듈이 모두 삭제되어 모든 테스트가 새로운 상태로 시작됩니다. testCleanup 또는 'after'방법을 사용하여이 작업을 수행 할 수도 있지만 구성에 포함하면 훨씬 더 쉽습니다.
# 3) 관련 테스트
# 1) testTimeout : 이 구성은 밀리 초 단위로 테스트에 대한 하드 시간 제한 설정을 제공하는 데 사용됩니다. 이 구성된 임계 값을 초과하는 모든 테스트는 시간 초과 예외로 인해 실패로 표시됩니다.
'jest' { 'testTimeout': 100 } # 2) 글로벌 : 이 구성은 각 테스트에서 사용할 수있는 전역 변수를 설정하는 데 사용됩니다.
'jest' { 'globals': { 'globalVar': 'test global variable!' } } 테스트에서 전역 변수를 사용 해보고 예상대로 작동하는지 확인해 보겠습니다.
describe('Calculator tests', () => { test('add 2 numbers', () => { // arrange & act const val = mathOps.sum(3,4) console.log(globalVar) // assert expect(val).toBe(7) }) 이 테스트를 실행 한 후 globalVar의 값을 기록해야합니다.
검사 여기 모든 구성 옵션의 전체 목록은
IS 구성에 대한 비디오 자습서
Jest를 사용한 디버깅
이 섹션에서는 Jest를 기반으로 작성된 테스트를 디버그하는 방법을 이해하려고 노력할 것입니다.
Jest 테스트를 디버깅 할 수있는 두 가지 방법을 적용하고 이해할 것입니다.
- Node의 기본 디버거를 사용한 다음 Chrome Inspector를 사용하여 테스트를 디버깅합니다.
- Visual Studio Code의 디버그 구성을 사용하여 Visual Studio Code 편집기 자체에서 테스트를 디버깅합니다. Visual Studio Code는 요즘 대부분의 Javascript 개발에서 선택되는 기본 편집기이므로 가장 일반적으로 사용되는 디버깅 방법입니다.
이러한 각 접근 방식은 아래에서 자세히 설명합니다.
# 1) 노드의 네이티브 디버거 사용
Node JS 네이티브 디버거를 사용하려면 테스트에서 중단 점을 배치 할 'debugger'키워드를 삽입해야합니다.
테스트 실행자가 디버거 명령을 실행하면 실행이 일시 중지되고 크롬 디버거 도구를 연결하면 Chrome 도구를 사용하여 테스트 코드 (테스트중인 기능 포함)를 디버깅 할 수 있습니다.
Chrome 브라우저는 Node의 Native Debugger를 사용하기위한 전제 조건입니다.
아래 단계를 따르십시오.
char 배열을 int C ++로
#1) 테스트 내에 디버거 키워드를 추가합니다. 즉 테스트가 중단 점에 도달하기를 원하는 지점에 'debugger'명령을 삽입합니다.
#두) –inspect-brk 플래그를 사용하여 테스트를 실행합니다.
중단 점 모드에서 테스트를 실행하려면 아래 명령을 사용하십시오.
/usr/local/bin/node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand#삼) Chrome에서 노드의 디버거를 연결합니다. 이제 Chrome 브라우저에서 chrome : // inspect로 이동하여 위 단계에서 만든 대상 리스너에 연결합니다.
# 4) 실행을 계속하면 중단 점이 크롬 디버거 인스펙터에서 적중하고 크롬 디버거 자체에서 호출 스택 및 객체 상태를 디버깅 할 수 있습니다.
Jest 테스트를 디버깅하는이 접근 방식은 괜찮지 만 코드 편집기에서 Chrome으로 또는 그 반대로 계속 전환해야하므로 사용자 친화적이지 않아 많은 마찰이 발생합니다. 다음 섹션에서는 Visual Studio 코드 편집기 자체에서 디버거를 구성하는 방법을 살펴 봅니다.
# 2) VS Code의 디버그 구성 사용
#1) 왼쪽 패널에서 Visual Studio 코드의 디버그 / 실행 섹션을 선택합니다.
#두) 이제 jest 테스트를위한 디버그 구성을 업데이트합니다. 그렇게하려면 메뉴 옵션을 선택하여 새 구성을 추가하십시오.
#삼) 구성 추가 옵션을 선택하면 편집기 창에 기본 콘텐츠가있는`launch.json` 파일이 열립니다. 기본 콘텐츠를 제거하고 Jest 테스트를위한 디버그 구성을 만들기 위해 아래 콘텐츠를 복사합니다.
{ 'version': '0.2.0', 'configurations': ( { 'name': 'Debug Jest Tests', 'type': 'node', 'request': 'launch', 'runtimeArgs': ( '--inspect-brk', '${workspaceRoot}/node_modules/jest/bin/jest.js', '--runInBand' ), 'console': 'integratedTerminal', 'internalConsoleOptions': 'neverOpen', 'port': 9229 } ) } # 4) Jest 테스트를 디버그하는 데 사용할 새로 추가 된 콘텐츠 구성을 저장합니다. 구성을주의 깊게 읽으면 명령을 통해 Chrome 개발자 도구에서 노드 디버거에 연결하려고 할 때 수행 한 것과 유사합니다.
--inspect-brk ./node_modules/jest/bin/jest.js --runInBand여기에 구성이 있으면 테스트가 편집기 자체 (이 경우 VSCode)의 일부로 실행 / 디버깅되고 외부 애플리케이션에 연결할 필요가 없다는 장점이 있습니다.
# 5) 디버그 구성이 생성되면 이제 테스트에 중단 점을 추가하고이 RUN 구성을 사용하여 실행할 수 있습니다. 이렇게하면 테스트가 중단 점에서 중지되고 실제 테스트 파일의 중단 점에서 값, 개체 상태를 디버깅 할 수 있습니다.
코드 파일의 줄 번호 근처를 클릭하여 중단 점을 추가 할 수 있습니다.
자바의 다차원 배열
# 6) 중단 점이 추가되면 테스트를 실행 / 디버그하기 위해 3 단계에서 추가 한 실행 구성을 선택할 수 있습니다.
# 7) 실행 버튼을 선택 / 클릭하면 실행이 배치 된 중단 점에 도달하는 것을 볼 수 있어야하며 중단 점에서 환경 / 변수 값, 스택 추적 등과 같은 세부 정보를 얻을 수 있습니다.
중단 점 / 코드 흐름 제어 버튼을 사용하여 다음 중단 점으로 이동하거나 자세한 내용을 보려면 함수 내부로 이동할 수 있습니다.
비디오 자습서 He IS디버깅
Mocha Vs Jasmine이 있습니다.
아래 섹션에서는 스냅 샷 테스트, 구성 용이성 및 다양한 프레임 워크의 기능과 같은 다양한 매개 변수 및 기능 비교에 대해 Jest 대 Mocha 및 Jest 대 Jasmine을 비교합니다.
| 매개 변수 | 이다 | 모카 | 재스민 속 |
|---|---|---|---|
| 지원되는 테스트 유형 | 주로 단위 테스트에 사용됩니다. | 단위 테스트 | 단위 테스트 및 E2E 테스트. |
| 스냅 샷 테스트 | 완전히 지원됨-특히 React 구성 요소에 사용되는 Jest는 구성 요소의 스냅 샷을 찍고이를 사용하여 저장된 구성 요소 구조와 테스트 출력을 비교하는 것을 지원합니다. 스냅 샷은 UI가 예기치 않게 변경되지 않도록하는 좋은 방법입니다. | 지원하지 않습니다 | 지원하지 않습니다 |
| 어설 션 및 매처 | 매처에 expect.js 라이브러리를 사용하십시오. | Node의 내장 어설 션 모듈을 지원하며 다른 어설 션 라이브러리도 포함 할 수 있습니다. | 내장 된 주장에서 |
| 조롱 | Jest의 Mocks 및 Stubs를 완벽하게 지원합니다. | 조롱 또는 스터 빙에 대한 기본 지원이 없습니다. Mocking을 지원하기 위해 Sinon과 같은 다른 라이브러리와 함께 사용할 수 있습니다. | spyOn을 사용하여 내장 된 제한된 지원. 다른 라이브러리와 통합 할 수 있습니다. |
| 실행 속도 | 4 배 Jest 테스트는 자체 샌드 박스에서 격리됩니다. 따라서 Jest 테스트는 본질적으로 병렬로 실행되므로 실행 시간이 크게 향상됩니다. | 엑스 테스트의 병렬 실행을 지원하지 않습니다. | 엑스 테스트의 병렬 실행을 지원하지 않습니다. |
| 구성 및 설정 | 매우 쉬움-구성이 필요 없습니다. | ||
| 테스트 실행 모드 | 목이 없는 | 목이 없는 | 목이 없는 |
| 테스트 출력 및 컨텍스트 | 풍부한 컨텍스트 사후 실행 생성-Jest는 자세한 테스트 컨텍스트를 제공하여 장애를 일으킨 원인을 자세히 조사하여 쉽게 디버깅 할 수 있도록합니다. | 테스트 출력은 읽기 어렵고 디버깅을 약간 어렵게 만듭니다. | |
| 디버깅 | 네이티브 노드 디버거에 대한 지원을 사용하여 별도의 시작 구성을 통해 Visual Studio Code와 같은 편집기 내에서 디버깅 할 수도 있습니다. | 네이티브 노드 디버거를 지원합니다. | Karma 테스트 실행기를 사용하여 Chrome에서 테스트를 시작하고 디버그 할 수 있습니다. |
| 코드 커버리지 | Jest는 코드 커버리지를 기본적으로 지원합니다. 커버리지 구성은 Jest 구성에서 지정할 수 있으며 각 테스트 실행으로 보고서를 생성 할 수 있습니다. | 내장 지원이 없습니다. 커버리지 보고서를 생성하기 위해 외부 라이브러리에 대한 지원을 제공합니다. | 모카와 동일 |
| 테스트 스타일 | BDD 세 가지 프레임 워크는 모두 사양 또는 사양 집합으로 작성되는 테스트를 지원하여 더 읽기 쉽게 만듭니다. | BDD | BDD |
결론
이 자습서에서는 Visual Studio Code 내에서 또는 Node의 기본 디버거를 사용하여 Chrome Inspector에서 Jest 테스트를 디버깅 할 수있는 다양한 방법에 대해 배웠습니다.
Jest 구성 파일에서 일반적으로 사용되는 구성 옵션도 살펴 보았습니다. Jest 구성은 코드 커버리지, Html 보고서, 모의 동작 설정, 전역 변수 설정 등과 같은 많은 작업을 수행하는 데 도움이됩니다.