2021년에는 카마를 사용하여 자바스크립트에 대한 유닛 테스트를 수행합니다.출발점

Karma시대에서 태어났다.이것은 웹에 있는 기존 테스트 도구에 대한 중대한 개선이자 AngularJS 자바스크립트 커뮤니티에서 전파된 원인 중의 하나이다.이 기술 덕분에 카마는 최근 10년 동안 웹 자바스크립트의 가장 좋은 테스트 운영자였다.
테스트 항목을 설정하고 어떻게 작동하는지 알아보자.첫 번째 단계는 NPM을 통한 설치
npm install karma
설치가 완료되면 Karma 바이너리 파일을 로컬 node modules 폴더에 배치합니다.이제 init 명령을 사용하여 프로젝트에 Karma 프로필을 만듭니다
npx karma init
여기서는 "TDD", "Jasmine"등의 유행 프레임 리스트에서 테스트 프레임을 선택할 수 있습니다. 예시에서 "Mocha"을 사용할 것이기 때문에 [Enter] 키를 누르면 다음 질문으로 넘어갈 수 있습니다.
Do you want to use Require.js ?
no
Jasmine 10년 전에 관리 의존성으로 유행했는데 당시에 우리는 웹 패키지가 없었다.현재 그것은 기본적으로 아직 초급 단계에 있기 때문에 우리는 [no]를 선택한다
Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome
현재 유행하는 브라우저 중 하나인 크롬을 테스트의 기본 브라우저로 사용할 것입니다. 대부분의 운영체제에 적용되기 때문입니다.
What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
> src/**/*.test.js
> src/**/*.js
여기서, 우리는 카마에게 우리가 원본 코드와 테스트 파일을 어디에 두었는지 알려야 한다.우리의 예시에서 우리는 src/***를 사용할 것이다.테스트현재 광범위하게 사용되고 있는 테스트 파일의 js 모드와 src/***.원본 파일 js
Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
>
비워두다
Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes
업력은 두 가지 모델에서'단일 운행'또는'관찰'을 운행할 수 있다.단일 운행은 테스트가 완성되면 업력이 멈추는 것을 의미하며 테스트를 다시 운행하기 위해 우리는 다시 수동으로 테스트를 운행해야 한다.관찰 모드에서 원본 파일이나 테스트 파일을 변경하면 Karma는 자동으로 테스트를 다시 실행합니다.이 편리한 기능은 우리의 시간을 절약하기 때문에 우리는 여기서 [예]를 선택한다
Config file generated at "/<project>/karma.conf.js".
우리는 이미 배치를 완성했는데, 업력은 결과가 업력이라고 말한다.conf.js 파일그게 다가 아니야.Karma는 선택한 패키지와 업데이트된 패키지에 따라 필요한 의존항을 설치했습니다.json
+ "karma-chrome-launcher": "^3.1.0",
+ "karma-jasmine": "^4.0.1",
우리의 예에서 이것들은
  • karma chrome launcher가 chrome에서 테스트를 실행하는 데 도움을 주는 플러그인
  • karmajasmine 자스민 어댑터
  • Karma에는 플러그인 구조가 있습니다.플러그인은 언어와 프레임워크에 특정된 대부분의 기능을 제공합니다.Karma 자체는 실행자로서 Karma HTTP 서버를 통해 브라우저에서 임의의 자바스크립트를 실행하는 기능만 제공합니다.또한, Karma는 테스트와 원본 파일을 브라우저에 보내기 전에 처리할 수 있도록 합니다.대략적으로 말하면,Karma는 테스트/원본 파일, 프레임워크, 브라우저와 운영체제 간의 중개이다.따라서 이런 구조는 업력이 한 가지 일만 할 수 있도록 허용하지만 그것을 잘 하고 업력의 출처를 바꾸지 않는 상황에서 개방적이고 확장해야 한다.나는 모두가 이 영화를 관람하도록 강력히 격려하며 Require.js 자체를 시간의 시련을 이겨낼 수 있는 우수한 제품으로 여긴다.
    테스트 프로젝트로 돌아가서 카마 설정을 완성합시다.테스트 프레임워크로 Jasmine을 사용하기로 결정했기 때문에, 우리도 그것을 설치해야 한다.
    npm install jasmine
    
    카르마 jasmine은 단지 카르마 자체의 카르마 어댑터일 뿐이다. 그래서 이것이 바로 우리가 카르마 jasmine 옆에 카르마를 설치해야 하는 이유다.
    지금 우리는 첫 번째 테스트를 작성하려고 한다.src/foo 파일을 만듭니다.테스트그리고 테스트 용례를 작성합니다.
    describe('My first Karma test', function() {
      it('should be true', function() {
        expect(true).toEqual(true);
      });
    });
    
    Karma를 시작하기 전에 Chrome가 설치되어 있는지 확인하고 테스트의 기본 브라우저로 선택하십시오.이제 저희가 운행 테스트를 할 준비가 됐어요.
    npx karma start
    
    이 명령은 카마 서버를 시작하고 크롬 브라우저를 열고 테스트를 실행합니다.테스트 결과는 터미널에 인쇄됩니다
    30 01 2021 14:59:09.329:WARN [karma]: No captured browser, open [http://localhost:9876/](http://localhost:9876/)
    30 01 2021 14:59:09.353:INFO [karma-server]: **Karma v6.0.3 server started at** [**http://localhost:9876/**](http://localhost:9876/)
    30 01 2021 14:59:09.353:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
    30 01 2021 14:59:09.358:INFO [launcher]: Starting browser Chrome
    30 01 2021 14:59:10.799:INFO [Chrome 88.0.4324.96 (Mac OS 11.1.0)]: Connected on socket kj6wu3FYg7XPKEKCAAAB with id 15222593
    Chrome 88.0.4324.96 (Mac OS 11.1.0): Executed 1 of 1 SUCCESS (0.002 secs / 0.002 secs)
    **TOTAL: 1 SUCCESS**
    
    여기서 너는 몇 가지 재미있는 곳을 주의할 수 있다
  • Karma 부팅 서버
  • 크롬 도금 중의
  • 개구Karma source code
  • 테스트 및 인쇄 실행 결과
  • 테스트가 완료되었을 때, 업력은 변경이 자동으로 다시 실행될 때까지 멈추지 않고 기다리지 않습니다.테스트를 바꿔서 어떻게 작동하는지 봅시다
    it('should be true', function() {
      expect(true).toEqual( **false** );
    });
    
    이제 결과를 보도록 하겠습니다.
    30 01 2021 15:02:37.443:INFO [filelist]: Changed file "/playground/src/foo.test.js".
    Chrome 88.0.4324.96 (Mac OS 11.1.0) **My first Karma test should be true FAILED**
            Error: **Expected true to equal false**.
                at <Jasmine>
                at UserContext.<anonymous> ( **src/foo.test.js:3:18** )
                at <Jasmine>
    Chrome 88.0.4324.96 (Mac OS 11.1.0): Executed 1 of 1 (1 FAILED) (6.226 secs / 0.001 secs)
    **TOTAL: 1 FAILED, 0 SUCCESS**
    
    카마가 자동으로 테스트를 다시 실행하는 것을 볼 수 있으며, 현재 1개의 테스트가 실패했다고 알려 줍니다.그 결과 오류에 대한 유용한 정보도 포함되어 있다.오류 메시지 포함
  • 테스트 세트의 이름.우리의 예에서 나의 첫 번째 업력 테스트
  • 테스트 용례의 명칭 — 테스트는 트루
  • 여야 합니다.
  • 예상/선언 오류 메시지 — 예상이 진짜와 가짜
  • 예외 스택 추적
  • 카마는 브라우저에서 테스트를 실행하기 때문에 브라우저의 개발자 도구로 테스트를 디버깅할 수 있습니다.이를 위해 테스트에서 중단점을 설정하고 Chrome에서 개발자 도구를 열 수 있습니다.또한 http://localhost:9876/debug 페이지를 열 수 있습니다. 테스트는 메인 창에서 실행되며 터미널에서 결과를 생성하지 않습니다.다른 브라우저에서 테스트를 실행하려면, 테스트를 멈추거나 설정을 변경할 필요가 없는 재미있는 브라우저에서 http://localhost:9876/를 켜서 쉽게 완성할 수 있습니다.브라우저를 Karma 서버에 연결하고 테스트를 실행합니다.이 방법을 사용하면 Karma 서버 URL을 열기만 하면 모든 장치와 브라우저에서 테스트를 실행할 수 있습니다.
    그래.이전의 변경 사항을 복구해서 테스트를 복구합시다.테스트를 중지하려면 Karma가 실행하는 터미널에서 [Ctrl-C]를 누르십시오.이제 카마 프로필을 변경해서 테스트를 기본적으로 실행할 때 '감시' 가 필요하지 않게 합니다.이 점을 하려면 업력을 키워야 한다.conf.js 및 singleRun을false에서true로 변경
    singleRun: **true** ,
    
    현재 npxkarmastart를 통해 테스트를 다시 실행하면 테스트가 끝난 후karma가 멈추는 것을 볼 수 있습니다.감시 모드에서 테스트를 실행하려면, 단일한 실행 매개 변수가 없는 것을 통과해야 한다
    npx karma start **--no-single-run**
    
    karma가 감시 모드에서 실행될 때,run 명령을 통해 테스트를 다시 실행할 수 있으며, 원본 파일과 테스트 파일을 변경할 필요가 없습니다.이 점을 위해서, 우리는karma 시작 과정을 중지하고 실행하지 않고 새로운 터미널 창을 열어야 한다
    npx karma run
    
    이 명령은 서로 다른 도구와 업력을 통합시키는 데 매우 유용하다.
    이제 원본 파일에 대해 얘기해 봅시다.위의 예시에서, 우리는 테스트 파일을 추가했는데, 이 파일은 그 내부의 모든 논리를 포함한다.파일 src/foo를 만듭니다.js와 쓰기 함수 곱셈
    function multiply(x, y) {
      return x * y;
    }
    
    현재 src/foo에서ddtest를 변경합니다.테스트js, 함수 곱셈 결과 검사하기
    it('should multiply 2 on 2', function() {
      expect(multiply(2, 2)).toEqual(4);
    });
    
    카마 서버를 멈추지 않으면 새 파일을 자동으로 검색하고 테스트하는 것을 볼 수 있습니다
    Chrome 88.0.4324.96 (Mac OS 11.1.0): Executed 2 of 2 SUCCESS (0.006 secs / 0 secs)
    TOTAL: 2 SUCCESS
    
    지금 우리는 두 개의 테스트가 있다.테스트 파일에서 멀티플렉스 함수를 볼 수 있습니다. 모든 파일이 같은 상하문 (같은 페이지에서) 에서 불러오고 실행되기 때문입니다.우리는 함수의 가시성을 제한하지 않기 때문에 전 세계에서 사용할 수 있고 테스트에서 사용할 수 있다.
    나는 여기서 이 문장을 다 썼다.이것은 Karma의 기본 설정이자 고급 설정의 시작점입니다.기본 설정부터 시작해서 정상적으로 작동할 수 있다고 확신할 때 고급 설정으로 전환하는 것을 권장합니다. 이것은 현재 웹 프로젝트의 사전 처리 절차를 포함합니다.

    좋은 웹페이지 즐겨찾기