jest tutorial javascript unit testing using jest framework
이 Jest 자습서에서는 다양한 Jest 기능, Jest Matchers 및 JavaScript 단위 테스트에 Jest 프레임 워크를 사용하는 방법에 대해 알아 봅니다.
Jest는 Facebook에서 만든 자바 스크립트 테스트 프레임 워크입니다.
주로 React (Facebook에서도 구축) 기반 앱용으로 설계되었지만 모든 Javascript 기반 코드베이스에 대한 자동화 시나리오를 작성하는 데 사용할 수 있습니다.
이 Jest 테스트 튜토리얼에서는 Jest의 다양한 기능과 그 매처에 대해 배우고 엔드 투 엔드 예제와 함께 Jest를 사용하는 방법을 알아 봅니다. Jest를 사용한 코드 커버리지에 대해서도 알아볼 것입니다.
이 JEST 시리즈의 튜토리얼 목록
튜토리얼 # 1 : Jest Tutorial-Jest Framework를 사용한 JavaScript 단위 테스트
튜토리얼 # 2 : Jest Framework를 사용하여 React 앱을 테스트하는 방법
튜토리얼 # 3 : Jest 구성 및 Jest 기반 테스트 디버깅
학습 내용 :
Jest 테스트 시작하기
Jest의 장점 / 특징 중 일부는 다음과 같습니다.
- 구성이 필요하지 않습니다.
- 빠른: Jest 테스트는 병렬로 실행됩니다. 그러면 테스트 실행 시간이 크게 단축됩니다.
- 기본 제공 코드 범위 : Jest는 즉시 코드 커버리지를 지원합니다. 이것은 모든 CI 기반 전달 파이프 라인과 프로젝트의 전반적인 테스트 효율성에 매우 유용한 측정 항목입니다.
- 격리 및 샌드 박스 테스트 : 각 Jest 테스트는 자체 샌드 박스에서 실행되므로 두 테스트가 서로 간섭하거나 영향을 미치지 않도록합니다.
- 강력한 조롱 지원 : Jest 테스트는 기능적 조롱, 타이머 조롱 또는 개별 API 호출 조롱 등 모든 유형의 조롱을 지원합니다.
- 스냅 샷 테스트 지원 : 스냅 샷 테스트는 React 관점에서 관련이 있습니다. Jest는 테스트중인 반응 구성 요소의 스냅 샷 캡처를 지원합니다. 이는 구성 요소의 실제 출력으로 검증 할 수 있습니다. 이는 구성 요소의 동작을 검증하는 데 크게 도움이됩니다.
JavaScript 단위 테스트를위한 Jest 프레임 워크
이 섹션에서는 간단한 Javascript 함수에 대해 JEST 프레임 워크를 사용하여 테스트를 작성하는 엔드 투 엔드 예제를 살펴 보겠습니다. 먼저 프로젝트에서 JEST 프레임 워크를 설치하는 방법을 살펴 보겠습니다.
IS 설치
Jest는 단순히 노드 패키지이며 모든 노드 기반 패키지 관리자를 사용하여 설치할 수 있습니다. 예, npm 또는 원사.
Jest 패키지를 설치하는 데 사용할 수있는 몇 가지 샘플 명령을 살펴 보겠습니다.
Android 용 음악 다운로더 상위 10 개
yarn add --dev jest
npm install --save-dev jest
Jest 모듈을 전역으로 설치하려면 npm 명령과 함께‘-g’플래그를 사용하면됩니다. 이렇게하면 npm 테스트 용 패키지 파일을 구성하지 않고도 Jest 명령을 직접 사용할 수 있습니다.
npm install -g jest
노드 기반 프로젝트에서 Jest 사용
노드 기반 프로젝트에서 Jest를 사용하려면 위 섹션의 명령을 사용하여 Jest 용 노드 패키지를 설치하면됩니다.
아래 단계에 따라 처음부터 노드 프로젝트를 만든 다음 Jest를 설치하십시오.
#1) 프로젝트 이름으로 이름을 사용하여 폴더 / 디렉토리를 만듭니다. 예를 들면 , myFirstNodeProject
#두) 이제 터미널 또는 명령 줄을 사용하여 위 단계에서 만든 프로젝트로 이동하고 아래 명령을 사용하여 npm init 스크립트를 실행합니다.
npm init
#삼) 위의 명령이 실행되면 다른 질문 / 매개 변수를 묻는 메시지가 표시됩니다.
예를 들면 , 프로젝트 이름, 버전 등. Enter 키를 계속 누르고 있으면됩니다 (기본값을 그대로 사용). 완료되면 프로젝트에 생성 된 package.json 파일이 표시됩니다. 모든 노드 기반 프로젝트의 필수 구성 파일입니다.
# 4) 이제 아래 명령을 사용하여 새로 생성 된 프로젝트에 Jest 패키지를 설치하는 명령을 실행합니다.
npm install --save-dev jest
그러면 Jest 모듈 (및 해당 종속성)이 설치됩니다.
# 5) 이제 Jest 바인딩이있는 노드 프로젝트가 준비되었습니다. Jest 테스트를 실행하도록 npm 테스트 스크립트를 구성 해 보겠습니다. 즉 'npm test'명령이 실행되면 스크립트가 모든 Jest 프레임 워크 기반 테스트를 실행해야합니다.
이를 위해 package.json 파일을 업데이트하고 아래와 같이 스크립트 섹션을 추가합니다.
'scripts': { 'test': 'jest' }
최종 package.json 파일은 다음과 같습니다.
{ 'name': 'jest-e2e', 'version': '1.0.0', 'description': '', 'main': 'index.js', 'scripts': { 'test': 'jest' }, 'author': '', 'license': 'ISC', 'dependencies': { 'jest': '^25.1.0' } }
자바 스크립트 함수에 대한 테스트 작성
이 섹션에서는 두 숫자의 더하기, 빼기 및 곱하기를위한 간단한 Javascript 함수 코드를 만들고 이에 대한 Jest 기반 테스트를 작성합니다.
PC 속도를 높이는 최고의 무료 소프트웨어
먼저 테스트중인 애플리케이션 (또는 함수)의 코드가 어떻게 보이는지 살펴 보겠습니다.
#1) 위 섹션에서 생성 한 노드 프로젝트에서 아래와 같은 내용으로 calculator.js라는 js 파일을 생성합니다.
const mathOperations = { sum: function(a,b) { return a + b; }, diff: function(a,b) { return a - b; }, product: function(a,b) { return a * b } } module.exports = mathOperations
#두) 이제 이러한 테스트에 대해 동일한 폴더에 이름이 지정된 테스트 파일을 만듭니다. calculator.test.js – 이것은 Jest 기반 테스트를 포함하는 모든 파일을 찾기 위해 Jest 프레임 워크에서 예상하는 규칙입니다. 또한 테스트에서 코드를 실행하기 위해 테스트중인 함수를 가져옵니다.
이것은 단지 import / require 선언으로 파일이 보이는 방식입니다.
const mathOperations = require('./calculator');
#삼) 이제 기본 파일 (예 : sum, diff 및 product)에 다른 메서드에 대한 테스트를 작성해 보겠습니다.
Jest 테스트는 BDD 스타일 테스트를 따르며 각 테스트 스위트에는 하나의 기본 설명 블록이 있고 여러 테스트 블록이있을 수 있습니다. 또한 테스트에는 설명 블록도 중첩 될 수 있습니다.
2 개의 숫자를 더하는 테스트를 작성하고 예상 결과를 검증 해 보겠습니다. 숫자는 1과 2로 제공하고 출력은 3으로 예상합니다.
describe('Calculator tests', () => { test('adding 1 + 2 should return 3', () => { expect(mathOperations.sum(1, 2)).toBe(3); }); })
위의 테스트와 관련하여 아래 사항을 참조하십시오.
에) 설명 블록은 테스트 스위트의 외부 설명입니다. 즉,이 파일의 계산기에 대해 작성할 모든 테스트에 대한 일반 컨테이너를 나타냅니다.
비) 다음으로 개별 테스트 블록이 있습니다. 이것은 단일 테스트를 나타냅니다. 따옴표로 묶인 문자열은 테스트 이름을 나타냅니다.
씨) expect 블록의 코드를 참조하십시오. 'expect'는 어설 션일뿐입니다. 이 명령문은 입력 1 및 2를 사용하여 테스트중인 함수에서 sum 메서드를 호출하고 출력이 3이 될 것으로 예상합니다.
우리는 이것을 더 잘 이해하기 위해 더 간단한 방법으로 다시 작성할 수도 있습니다.
아래를 참조하십시오. 이제 우리는 더 간결하게 만들기 위해 함수 호출과 어설 션을 두 개의 별도 문으로 분리했습니다.
describe('Calculator tests', () => { test('adding 1 + 2 should return 3', () => { // arrange and act var result = mathOperations.sum(1,2) // assert expect(result).toBe(3); }); })
디) 이 테스트를 실행하려면 ' 해수면 테스트 ”를 프로젝트 위치의 터미널 또는 명령 프롬프트에 표시합니다.
아래와 같이 출력이 표시됩니다.
# 4) 몇 가지 테스트를 더 해보겠습니다.
에) 먼저 실패한 테스트를 작성하고 어떤 결과가 나오는지 확인하십시오. 마지막 섹션에서 작성한 것과 동일한 테스트에서 결과를 잘못된 값으로 변경하겠습니다. 테스트가 어떻게 보이는지 확인하십시오.
describe('Calculator tests', () => { test('adding 1 + 2 should return 10', () => { // arrange and act var result = mathOperations.sum(1,2) // assert expect(result).toBe(10); }); })
여기서 우리는 1과 2의 합이 10을 반환 할 것으로 예상하고 있습니다.
이것을 실행하고 우리가 얻는 것을 보자.
테스트가 실패했을 때 자세한 출력을 볼 수 있습니다. 즉, 실제로 반환 된 내용과 예상 한 내용, 테스트중인 함수에서 오류를 일으킨 행 등을 볼 수 있습니다.
비) 다른 기능, 즉 차이점과 제품에 대한 테스트를 더 작성해 보겠습니다.
모든 테스트가 포함 된 테스트 파일은 다음과 같습니다.
const mathOperations = require('./calculator'); describe('Calculator tests', () => { test('adding 1 + 2 should return 3', () => { // arrange and act var result = mathOperations.sum(1,2) // assert expect(result).toBe(3); }); test('subtracting 2 from 10 should return 8', () => { // arrange and act var result = mathOperations.diff(10,2) // assert expect(result).toBe(8); }); test('multiplying 2 and 8 should return 16', () => { // arrange and act var result = mathOperations.product(2,8) // assert expect(result).toBe(16); }); })
위의 테스트가 실행되면 아래에 주어진 출력이 생성됩니다.
비디오 튜토리얼 : Jest 란?
Matchers가 있습니다
Jest 단언은 조건을 단언하기 위해 matcher를 사용합니다. Jest는 예상 API의 매처를 사용합니다. 예상 API 문서를 참조 할 수 있습니다. 여기.
Jest 테스트와 함께 가장 일반적으로 사용되는 매처 몇 가지를 살펴 보겠습니다.
# 1) 평등
이들은 가장 일반적으로 사용되는 매처입니다. 동등성 또는 부등식을 확인하는 데 사용되며 대부분 산술 연산에 사용됩니다.
아래에서 몇 가지 예를 살펴 보겠습니다.
여기서 우리는 같음과 같지 않음과 유사한 toBe와 not.toBe를 사용하여 2 개의 매처를 작성했습니다.
test('equality matchers', () => { expect(2*2).toBe(4); expect(4-2).not.toBe(1); })
# 2) 진실성
여기서 우리는 null, falsy 및 truthy, 즉 거짓 및 진실 값에 대한 매처를 볼 수 있습니다. 논리적으로 사실이 아닌 것은 거짓이라는 점에 유의하는 것이 중요합니다.
예를 들면 숫자 0, null, 빈 문자열, NaN은 모두 falsy w.r.t Javascript의 예입니다.
test('truthy operators', () => { var name='Software testing help' var n = null expect(n).toBeNull() expect(name).not.toBeNull // name has a valid value expect(name).toBeTruthy() //fail - as null is non success expect(n).toBeTruthy() // pass - null treated as false or negative expect(n).toBeFalsy() // 0 - treated as false expect(0).toBeFalsy() })
# 3) 번호 매처
이러한 매처는 일반적인 산술 연산에 사용할 수 있습니다.
예를 들면 greaterThan, lessThan, greaterThanOrEqual 등
자세한 내용은 아래 예를 확인하십시오.
test('numeric operators', () => { var num1 = 100; var num2 = -20; var num3 = 0; // greater than expect(num1).toBeGreaterThan(10) // less than or equal expect(num2).toBeLessThanOrEqual(0) // greater than or equal expect(num3).toBeGreaterThanOrEqual(0) })
# 4) 스트링 매처
단위 테스트에서 어설 션으로 정규식과 일치하는 문자열이 많은 경우가 많습니다. Jest는 정규 표현식과 일치시킬 문자열에 대한 매처를 제공합니다.
test('string matchers',() => { var string1 = 'software testing help - a great resource for testers' // test for success match expect(string1).toMatch(/test/); // test for failure match expect(string1).not.toMatch(/abc/) })
비디오 자습서 : Matchers가 있습니다.
Jest Hooks – 설치 및 분해
다른 모든 xUnit 기반 단위 테스트 프레임 워크와 마찬가지로 Jest 프레임 워크는 설정 및 정리 방법에 대한 후크도 제공합니다. 이러한 후크 메소드는 테스트 스위트의 각 테스트 전후 또는 testSuite 실행 전후에 실행됩니다.
사용할 수있는 후크는 총 4 개입니다.
- beforeEach 및 afterEach : 이러한 후크는 테스트 스위트의 각 테스트 전후에 실행됩니다.
- beforeAll 및 afterAll : 이러한 후크는 각 테스트 스위트에 대해 한 번만 실행됩니다. 즉, 테스트 스위트에 10 개의 테스트가있는 경우 이러한 후크는 모든 테스트 실행에 대해 한 번만 실행됩니다.
예를 보겠습니다. 두 개의 숫자를 추가하는 동일한 테스트 예제에 이러한 후크를 추가합니다.
설명을 위해 beforeEach 후크에 입력을 설정합니다. 테스트 파일은 아래와 같이 테스트 후크로 표시됩니다.
describe('Calculator tests', () => { var input1 = 0 var input2 = 0 beforeAll(() => { console.log('beforeAll called'); }); afterAll(() => { console.log('afterAll called'); }); beforeEach(() => { console.log('beforeEach called'); input1 = 1; input2 = 2; }); afterEach(() => { console.log('afterEach called'); }); test('adding 1 + 2 should return 3', () => { // arrange and act var result = mathOperations.sum(input1,input2) // assert expect(result).toBe(3); }); })
팁 & 트릭
#1) 명령 줄 보고서는 훌륭하지만 읽기 어렵습니다. Jest 테스트를위한 HTML 기반 테스트 보고서를 생성하는 데 사용할 수있는 라이브러리 / 모듈이 있습니다. 아래와 같이 달성 할 수 있습니다.
C ++ 인터뷰 코딩 질문
- 아래 명령을 사용하여 jest-html-reporter 용 노드 패키지를 추가합니다.
npm install --save-dev jest-html-reporter
- 이제 노드 프로젝트의 package.json 파일에 기자에 대한 Jest 구성을 추가합니다.
'jest': { 'reporters': [ 'default', [ './node_modules/jest-html-reporter', { 'pageTitle': 'Test Report' } ] ] }
- 지금 구성했으면 ' 해수면 테스트 ”명령.
- 설정이 성공하면 프로젝트 디렉토리에서 생성되는 Html 기반 보고서를 볼 수 있습니다.
# 2) 코드 커버리지 보고서 생성 : 코드 커버리지는 단위 테스트 관점에서 볼 때 가장 중요한 메트릭 중 하나입니다. 기본적으로 테스트중인 응용 프로그램에 대해 다루는 문 / 분기의 비율을 측정합니다.
Jest는 코드 커버리지에 대한 기본 지원을 제공합니다. Jest 취재 보고서를 받으려면 구성이 있습니다 에 추가해야합니다. package.json 파일.
아래와 같이 구성을 추가합니다.
'jest': { 'collectCoverage':true }
이 구성이 완료되면 다음 명령을 사용하여 테스트를 실행 해보십시오. '해수면 테스트' , 그리고 당신은 할 수 있습니다 아래와 같이 테스트 실행 결과 바로 아래에있는 코드 커버리지 세부 정보를 참조하십시오.
비디오 자습서 : Jest 커버리지 및 HTML 보고서 생성
결론
이 Jest 자습서에서는 Jest 프레임 워크의 기본 사항을 살펴 보았습니다. Jest 프레임 워크를 설치하는 방법과 간단한 Javascript 파일을 테스트하는 데 사용할 수있는 방법을 배웠습니다.
또한 Jest가 지원하는 다양한 유형의 매처를 탐색하고 Html 리포터 및 코드 커버리지 보고서도 다루었습니다.