Karma 자습서 : Karma Test Runner를 사용한 프런트 엔드 단위 테스트

karma tutorial front end unit testing using karma test runner

이 자습서에서는 Karma를 설정하고 Karma를 사용하여 프런트 엔드 유닛 테스트를 자동화하는 방법, Karma.conf.js 파일의 기본 구성 옵션 등을 설명합니다.

이 자습서에서는 Karma 및 일부 관련 도구를 사용하여 소프트웨어 프런트 엔드의 단위 테스트를 자동화하는 절차를 설명합니다.

JavaScript 라이브러리를 사용하여 개발 된 웹 애플리케이션 인 'Jquery'및 JavaScript 런타임 : 'NodeJS'로 시작하겠습니다. 나중에 AngularJS 및 ReactJS와 같은 일부 JavaScript 프레임 워크를 살펴 보겠습니다.

=>아래로 스크롤Karma 튜토리얼의 전체 목록을 보려면

학습 내용 :

• Karma 자습서 목록
• 이 시리즈의 Karma 자습서 개요
• 프런트 엔드 단위 테스트 란 무엇입니까?
• Karma 테스트 러너는 무엇입니까?
  • Karma는 Testrunner로 어떻게 작동합니까?
• NodeJS 란 무엇입니까?
  • Npm (노드 패키지 관리자)이란 무엇입니까?
• Karma를 설치하는 방법?
  • Karma.conf.js 파일 구성 옵션 개요
• Karma 초기화 질문
  • 기타 karma.conf.js 파일 콘텐츠
  • Karma 브라우저 실행기
• 결론
  • 추천 도서

Karma 자습서 목록

튜토리얼 # 1 : Karma 자습서 : Karma Test Runner를 사용한 프런트 엔드 단위 테스트
튜토리얼 # 2 : Jasmine Jquery와 예제를 포함하는 Jasmine Framework 자습서
튜토리얼 # 3 : KARMA 및 JASMINE을 사용한 프런트 엔드 단위 테스트에 대한 샘플 프로젝트

이 시리즈의 Karma 자습서 개요

프런트 엔드 단위 테스트 란 무엇입니까?

모든 소프트웨어 시스템의 프런트 엔드는 사용자가 시스템에서 제공하는 모든 기능에 액세스하는 인터페이스입니다. 최상의 사용자 경험을 보장하려면 모든 사용자 요구 사항을 염두에두고 프런트 엔드 개발자가 프런트 엔드를 코딩했는지 확인해야합니다.

이를 시행하는 유일한 방법은 개발자의 코드에 대해 테스트를 작성하고 실행하는 것입니다. 결과물은 이러한 모든 테스트 결과가 '통과'상태 인 경우에만 품질 프런트 엔드 코드 / 기능으로 수락되어야합니다.

단위 테스트는 소스 코드의 개별적이고 독립적 인 부분을 테스트하여 사용하기에 충분한 지 확인하는 일종의 소프트웨어 테스트 방법입니다.

언제 우리가 소프트웨어의 프런트 엔드 (클라이언트 측)에서이 단위 테스트를 수행하는 것을 프런트 엔드 단위 테스트라고합니다. 프런트 엔드 테스트의 반대는 백 엔드 테스트 (서버 측)입니다.

프런트 엔드 단위 테스트는 수동 또는 자동으로 수행 할 수 있습니다. 자동화 된 프런트 엔드 단위 테스트는 더 효과적이고 시간을 절약하기 때문에 요즘 추세입니다. 다양한 프로그래밍 플랫폼에서 프런트 엔드 단위 테스트에 사용할 수있는 다양한 도구가 있습니다.

AngularJS와 ReactJS는 널리 사용되는 두 가지 프론트 엔드 JavaScript 프레임 워크이지만 ReactJS는 상당히 새롭습니다.

애플리케이션에 대한 단위 테스트를 수행하기 위해 이러한 프런트 엔드 프레임 워크로 빌드 된 프런트 엔드 또는 프레임 워크없이 빌드 된 프런트 엔드, Karma, mocha, Jasmine, jest, 효소 등과 같은 특정 자동화 테스트 도구가 사용됩니다.

C ++ 문자를 문자열로 캐스트

먼저 Karma와 Jasmine을 사용하여 프런트 엔드 단위 테스트를 수행하는 방법을 배우고 나중에 다른 도구도 살펴볼 수 있습니다.

프론트 엔드 용 JavaScript 프레임 워크없이 빌드 된 프론트 엔드 용 픽스쳐를 사용하여 프론트 엔드 단위 테스트를 실행하는 것으로 시작합니다. 전체적으로이 시리즈에서 배운 내용을 3 개의 튜토리얼로 나눌 것입니다.

이 첫 번째 튜토리얼에서는 Karma가 설정되는 방법을 파악하고 두 번째 튜토리얼에서는 Jasmine을 자세히 설명하고 마지막으로 세 번째 튜토리얼에서는 실제 적용을 살펴 봅니다.

Karma 테스트 러너는 무엇입니까?

Karma는 여러 실제 브라우저에서 JavaScript 코드를 테스트 할 수있는 노드 기반 테스트 도구입니다. 노드 기반 도구는 실행하기 위해 Nodejs 엔진이 설치되어 있어야하며 노드 패키지 관리자 (npm)를 통해 액세스 (설치) 할 수있는 도구입니다.

Karma는 테스트 기반 개발을 빠르고 재미 있고 쉽게 만들어주는 도구입니다. 기술적으로 테스트 러너라고합니다. 여기에서 Karma는 Angular 팀이 개발했다는 ​​점을 언급 할 필요가 있습니다.

Karma는 Testrunner로 어떻게 작동합니까?

테스트 러너로서 Karma는 세 가지 중요한 작업을 수행합니다.

• 웹 서버를 시작하고 해당 서버에서 JavaScript 소스 및 테스트 파일을 제공합니다.
• 모든 소스 및 테스트 파일을 올바른 순서로로드합니다.
• 마지막으로 브라우저를 회전시켜 테스트를 실행합니다.

카르마는 다른 무엇을 할 수 있습니까?

위에 나열된 Karma의 기능 외에도 Karma가 수행하도록 구성 할 수있는 다른 작업이 거의 없습니다. 예를 들면 코드 테스트 커버리지 게시 coveralls.io ; 코드를 es6 형식에서 es5로 변환하고 여러 파일을 하나의 파일로 묶고 소스 맵을 생성합니다.

다음 튜토리얼에서는 이러한 것들이 어떻게 작동하는지 살펴볼 것입니다.

Karma 시작을위한 요구 사항

Karma를 시작하려면 NodeJS 및 Node 패키지 관리자를 이해하고 있어야합니다.

NodeJS 란 무엇입니까?

Nodejs는 JavaScript 비동기 호출의 차단 특성을 해결합니다. 즉, JavaScript에서 비동기 함수에 액세스 할 때 비동기 호출이 반환 될 때까지 코드의 다른 부분이 실행되는 것을 방지합니다. 그러나 NodeJS를 사용하면 비동기식 비 차단 함수 호출이 가능합니다.

기술적 인 측면에서 NodeJS는 확장 가능한 네트워크 애플리케이션을 쉽고 가능하게 구축 할 수있는 비동기 이벤트 기반 JavaScript 런타임이라고 할 수 있습니다.

NodeJS 시작하기

NodeJS 프레임 워크를 설치하기 만하면됩니다. 당신이해야 할 일은 그들의 웹 사이트 OS에 따라 설치 프로그램을 다운로드하고 해당 사이트의 설치 지침을 따라야합니다.

Npm (노드 패키지 관리자)이란 무엇입니까?

노드 패키지 관리자 (npm)는 자체 애플리케이션에서 재사용 할 수있는 다른 사전 빌드 된 노드 기반 애플리케이션 또는 모듈을 설치하는 데 사용되는 JavaScript 패키지 관리자입니다.

Npm은 NodeJS를 설치할 때 설치되지만 npm은 노드보다 빠르게 업데이트됩니다. 따라서 어떤 시점에서 npm을 업데이트해야 할 수도 있습니다. 최신 버전의 npm을 설치하려면 명령 줄에서 다음 명령을 실행해야합니다. npm 설치 npm @ 최신 -g

위의 명령은 OS 셸에 응용 프로그램 npm을 실행하도록 요청하고 응용 프로그램이 npm 패키지 설치를 수행해야 함을 나타냅니다. @latest는 최신 버전의 패키지가 설치되어야 함을 나타내고 -g 옵션은 패키지가 전역 적으로 설치되어야 함을 나타냅니다.

npm에 대한 자세한 내용은 찾을 수 있습니다. 여기 .

여기서 언급해야 할 두 가지 중요한 사항이 있습니다. 즉 –save 및 –save-dev 옵션을 사용하여 패키지를 설치하는 것입니다.

테스트 중에 설치된 모든 패키지는 –save-dev 옵션을 사용하여 설치해야합니다. 즉, 패키지 관리자에게 패키지를 프로젝트 종속성이 아닌 개발 종속성으로 설치하도록 지시해야합니다 (–save 사용시).

패키지는 생산 단계에서 애플리케이션에 필요하지 않지만 품질 보증 목적을 위해 개발 단계에서만 필요하므로 개발 종속성을 선택해야합니다.

Karma를 설치하는 방법?

Karma를 시작하려면 단위 테스트를 작성하려는 프로젝트의 폴더를 만들어야합니다. 'basicUT'와 같이 이름을 지정할 수 있습니다. Visual Studio Code를 텍스트 편집기로 사용하고 있으므로 다운로드하여 설치하는 것이 좋습니다. 당신은 그것을 찾을 수 있습니다 여기 .

Visual Studio 코드 내장 터미널 창을 열고 '보기 메뉴'를 클릭 한 다음 통합 터미널 하위 메뉴를 선택합니다.

아래 그림과 같이 터미널 창에 'npminit'를 입력합니다. 이 명령은 모든 노드 기반 애플리케이션에 있어야하는 'package.json'파일을 자동으로 설정하도록 안내합니다.

package.json 파일은 이름, 버전 번호, 작성자, 애플리케이션 종속성, 개발 종속성, 테스트 명령 또는 스크립트 및 스크립트와 같은 애플리케이션에 대한 정보를 저장하여 애플리케이션을 시작하거나 앱을 실행 가능한 형식으로 빌드합니다.

딸깍 하는 소리 여기 'package.json'파일에 대한 자세한 내용은

npminit를 사용하여 package.json 파일 초기화 스크린 샷

위에서 설명한대로 Karma를 설치하려면 다음 명령 만 실행하면됩니다. npm install Karma @ latest –save-dev . 이제 그 명령이 의미하는 바를 해석 할 수 있기를 바랍니다.

이제 Karma를 성공적으로 설치했습니다. 프런트 엔드 단위 테스트에 Karma를 사용하기 위해해야 ​​할 다음 작업은 무엇입니까?

구성 파일을 작성하기 만하면되며 파일 이름은 일반적으로 JavaScript 용 Karma.conf.js로 지정됩니다. 그러나 CoffeeScript에서는 다릅니다. 딸깍 하는 소리 여기 Karma 구성 파일에 대해 자세히 알아보십시오.

Karma.conf.js 파일 구성 옵션 개요

Karma.conf.js 구성 파일에는 Karma의 세 가지 중요한 기능을 수행하기 위해 따라야하는 설정 지침이 포함되어 있어야합니다.

이 구성 파일은 'karma init'명령을 사용하여 수동 또는 자동으로 생성 할 수 있습니다.이 명령은 사용자가 대답 할 수있는 다양한 질문을 표시하기 시작하며 Karma는 사용자가 제공 한 대답을 사용하여 구성 파일을 설정합니다.

지금 쯤이면 'karma init'명령을 실행하면 오류가 발생한다는 것을 알게되었을 것입니다. ' ‘Karma’는 내부 또는 외부 명령 실행 프로그램 또는 배치 파일로 인식되지 않습니다. ”.

Karma는 현재 작업중인 프로젝트에 전역 적으로 설치되지 않고 로컬로 설치 되었기 때문입니다. 따라서 운영 체제 셸은 Windows를 사용하는 경우 경로 환경 설정에서 응용 프로그램 Karma를, Mac을 사용하는 경우 .bash_profile 파일에서 찾을 수 없습니다.

이 오류를 수정하려면 Karma를 전역 적으로 설치해야합니다. Karma뿐만 아니라 Karma-cli라는 명령 줄에서 Karma를 사용할 수 있도록 특별히 설계된 패키지입니다. 명령을 실행하기 만하면됩니다. ′ Npm install -g karma-cli’ .

이제 karma-init 명령을 다시 실행하면 아래 그림과 같이 질문을 볼 수 있습니다. 각 질문에 답하고‘ENTER’키를 누르면 다음 질문이 나옵니다.

명령 줄에서 Karma init 명령을 실행합니다.

아래 표는이 튜토리얼의 맥락에서 답이 무엇인지와 함께 질문 목록과 그 의미를 제공합니다.

Karma 초기화 질문

Q # 1) 어떤 테스트 프레임 워크를 사용 하시겠습니까?

설명: 테스트 프레임 워크는 특정 언어의 소프트웨어 제품에 대한 테스트 코딩 프로세스를 자동화하는 데 필요한 기능과 루틴을 제공하는 패키지입니다. 예를 들어 jasmine과 mocha는 자바 스크립트 소프트웨어 패키지를위한 테스트 프레임 워크이고, Junit과 JTest는 자바를위한 테스트 프레임 워크입니다. 이 상세 사항은.

대답: 탭을 사용하여 노드 기반 애플리케이션에 대해 사용 가능한 다른 테스트 프레임 워크를 보도록 요청하는 지침이 표시되지만 기본적으로 jasmine이 표시되므로 Enter를 클릭하기 만하면됩니다.

Q # 2) Require.js를 사용 하시겠습니까?

설명: Require.js는 JavaScript 파일 및 모듈 로더입니다. 파일 또는 모듈 로더가 필요한 이유가 궁금 할 것입니다. 읽다 이

대답: 코드에서 우리는 require.js를 사용하지 않을 것이므로 단순히 아니오라고 대답 할 것입니다. 그는 우리가 무엇을 사용할 것인가? require 문을 사용하여 외부 파일을 다른 파일로 가져올 수 있으려면 모듈 로더가 필요하므로 Browserify를 선택합니다. 아래에서 자세한 내용을 볼 수 있습니다.

Q # 3) 브라우저를 자동으로 캡처 하시겠습니까?

설명: karma는 여러 브라우저에서 프런트 엔드를 테스트하는 데 도움이되는 도구이므로이 질문은 karma start로 테스트를 실행할 때마다 원하는 브라우저를 선택하기위한 것입니다.

대답: 이 강의에서는 chrome, firefox 및 phantomjs를 선택합니다. 이제 질문은 PhantomJS가 무엇입니까? PhantomJS는 헤드리스 웹 사이트 테스트, 화면 캡처, 페이지 자동화 및 네트워크 모니터링을위한 헤드리스 웹 브라우저로 세부 정보를 볼 수 있습니다. 여기 .

또 다른 질문, 헤드리스 웹 브라우저 란 무엇입니까? 헤드리스 웹 브라우저는 그래픽 사용자 인터페이스가없는 브라우저이며 코드는 콘솔과 같은 환경에서 실행됩니다.

Q # 4) 소스 및 테스트 파일의 위치는 무엇입니까?

설명: 이 질문은 프런트 엔드 파일을 저장할 경로와 이에 대해 단위 테스트를 수행 할 테스트 파일을 노출하기위한 것입니다.

대답: 이 프로젝트의 경우 소스 파일 경로로 public / js / *. js를 입력하고 테스트 파일 경로로 test / * Spec.js를 입력합니다. * Spec.js는 모든 테스트 파일을 무엇이든 호출 할 수 있지만 끝에 .js 파일 확장자로 Spec을 포함해야 함을 나타냅니다.

Q # 5) 이전 패턴에 포함 된 파일을 제외해야합니까?

설명: 때로는 특정 소스 파일과 테스트 파일을로드하지 않아야 할 필요가있을 수 있습니다.이 질문은 Karma가 브라우저에로드하면 안되는 파일을 지정하기위한 것입니다.

대답: Enter를 눌러 빈 문자열을 입력하기 만하면됩니다. '글롭 패턴을 사용할 수 있습니다. 예를 들어 '** / *. swp'. ' Glob 패턴은 와일드 카드 문자를 사용하여 Unix와 유사한 환경에서 파일 이름 집합을 지정하는 데 사용됩니다.
우리의 경우 public / js / *. js는 (*)로 표시된 모든 문자 집합으로 명명 된 파일을 나타내며 파일 확장자가 .js이고 public / js 경로에 있습니다. 더 읽어보기 여기

Q # 6) Karma가 모든 파일을 감시하고 변경시 테스트를 실행하기를 원하십니까?

설명: 작업 / 테스트 실행자가 파일을 감시 할 때 단순히 의미하는 것은 개발 중에 파일을 편집 할 때마다 테스트 / 작업 실행자가 파일을 다시로드하거나 파일의 기능을 다시 수행하는 것입니다. 수동으로 묻지 않아도됩니다. 다시 할 수 있습니다.

대답: 그래서 간단히 예라고 대답하십시오.

기타 karma.conf.js 파일 콘텐츠

# 1) basePath :이 구성에는 테스트 및 소스 파일에 제공된 경로 정보를 확인하는 데 사용해야하는 폴더의 이름이 있습니다.

# 2) 전 처리기 : 소스 및 테스트 파일을 브라우저에로드하기 전에 처리하는 데 사용해야하는 프로그램 파일의 이름을 포함합니다.

왜 이것이 필요한가요?

아직 브라우저에서 이해하지 못하는 ES6 코딩 스타일의 출현으로 코드를 ES6 형식에서 브라우저가 이해할 수있는 ES5로 변환 할 필요가 있습니다. 따라서 Karma 용 바벨 전처리기를 지정하여이를 변환하는 데 사용할 수 있습니다. 브라우저에로드하기 전에 ES6에서 ES5로 코드를 작성합니다.

전 처리기의 다른 용도가 있습니다. 예 : coveralls.io에 코드 테스트 커버리지 게시, 참조 여기 상세 사항은.

# 3) 기자 :이 구성 옵션은 테스트 결과를보고하는 데 사용할 패키지를 지정합니다. 코드 테스트 범위를보고하기위한 여러 기자가 있습니다. 예 : 적용 범위. 그러나 기본적으로 진행하도록 설정되어 있습니다. 배열이므로 다른 리포터도 추가 할 수 있습니다.

# 4) 포트 : 브라우저가 회전하는 포트를 지정합니다.

# 5) 색상 :보고자가 색상이있는 보고서를 생성해야하는지 여부를 지정합니다.

# 6) logLevel : 로깅 수준을 지정합니다. 기본적으로 정보 만 기록됨을 의미하는 config.LOG_INFO로 설정됩니다.

# 7) 싱글 런 : 테스트를 한 번 실행 한 후 Karma를 종료할지 여부를 지정합니다. true로 설정하면 Karma는 테스트를 실행하고 테스트 실패 또는 통과 여부에 따라 상태 0 또는 1로 종료합니다. 그렇지 않으면 Karma가 중지되지 않습니다.

이 구성은 TravisCI 및 CircleCI와 같은 도구를 사용하는 지속적인 통합 테스트 목적에 필요합니다.

# 8) 동시성 : Karma가 동시에 시작해야하는 브라우저 수를 지정합니다. 기본적으로 무한대로 설정됩니다.

딸깍 하는 소리 여기 Karma 구성 옵션에 대한 자세한 내용은

당신이 관찰력이있는 학습자라면이 세 줄을 보았을 것입니다.

아래 섹션에서이를 살펴 보겠습니다.

Karma 브라우저 실행기

Karma-firefox-launcher, Karma-chrome-launcher 및 Karma-phantomjs-launcher는 일반적으로 Karma의 브라우저 실행기로 불릴 수 있습니다.

Karma는 독립적 인 이러한 브라우저 애플리케이션을 가동해야하므로 Karma가 테스트를 실행중인 모든 운영 체제에서 브라우저를 가동하는 셸 명령을 실행하기 위해 Karma에 인터페이스를 제공하려면 타사 애플리케이션이 필요합니다.

따라서 이들은 각각 firefox, chrome 및 phantomjs 용 Karma 브라우저 실행기입니다. Karma는 이러한 요구 사항을 설치할 수 없음을 알리기 위해 이러한 진술을 표시 한 다음 수동으로 설치하도록 요청합니다.

이를 위해 노드 패키지 관리자를 사용하고 명령 줄에서 다음 명령을 실행합니다. npm 설치 Karma-chrome-launcher Karma-firefox-launcher Karma-phantomjs-launcher –save-dev

기본 게이트웨이를 사용할 수 없음 수정

우리 모두는 phantomjs가 설치되어 있지 않은 크롬과 파이어 폭스 브라우저를 설치해야합니다. 사실이면 설치해야합니다. 여기 자세한 내용을 보려면 여기 빠른 시작 가이드입니다.

결론

이 자습서에서는 프런트 엔드 단위 테스트가 무엇인지 이해하려고했습니다. 또한 노드 기반 도구 인 Karma로 알려진 JavaScript 소프트웨어 용 주요 프런트 엔드 단위 테스트 도구를 도입했습니다. 또한 Karma.conf.js 파일의 기본 구성 옵션과 그 의미를 모두 제시했습니다.

테이크 아웃

• 단위 테스트는 소스 코드의 개별적이고 독립적 인 부분을 테스트하여 사용하기에 충분한 지 확인하는 일종의 소프트웨어 테스트 방법입니다.
• 소프트웨어의 프런트 엔드 (클라이언트 측)에서이 단위 테스트를 수행 할 때이를 프런트 엔드 단위 테스트라고합니다.
• Karma는 여러 실제 브라우저에서 JavaScript 코드를 테스트 할 수있는 노드 기반 테스트 도구입니다. 따라서 테스트 러너라고합니다.
• Nodejs는 확장 가능한 네트워크 애플리케이션을 쉽고 가능하게 구축 할 수있는 비동기 이벤트 기반 런타임 JavaScript입니다.
• 노드 패키지 관리자 (npm)는 자체 애플리케이션에서 재사용 할 수있는 다른 사전 빌드 된 노드 기반 애플리케이션 또는 모듈을 설치하는 데 사용되는 JavaScript 패키지 관리자입니다.

다음 튜토리얼

Karma만으로는 JavaScript 애플리케이션의 프런트 엔드 단위 테스트를 자동화 할 수 없습니다. 또한 테스트 케이스 작성을 용이하게하는 테스트 프레임 워크와 같은 다른 테스트 도구와 함께 작동해야합니다.

다음 튜토리얼에서는 자바 스크립트 라이브러리를 사용하는 HTML 픽스쳐를 테스트 할 수 있도록 Jasmine의 기능을 확장하는 Jasmine 및 Jasmine-Jquery 패키지 인 Jquery에 대해 살펴볼 것입니다.

추천 도서

• 2021 년에 가장 인기있는 단위 테스트 도구 20 가지
• 성공적인 단위 테스트의 핵심-개발자가 자신의 코드를 테스트하는 방법
• 자세한 답변이 포함 된 TOP 45 JavaScript 인터뷰 질문
• 초보자를위한 AngularJS 튜토리얼 (설치 가이드 포함)
• Angular 버전의 차이점 : Angular 대 AngularJS
• 소프트웨어 테스트의 테스트 범위 (테스트 범위를 최대화하기위한 팁)
• 48 Top AngularJS 인터뷰 질문 및 답변 (2021 목록)
• Node.js 테스트 프레임 워크 설정 방법 : Node.js 자습서