2021년에는 카마를 사용하여 자바스크립트에 대한 유닛 테스트를 수행합니다.출발점
8241 단어 jestjavascriptkarmatesting
테스트 항목을 설정하고 어떻게 작동하는지 알아보자.첫 번째 단계는 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/***.원본 파일 jsShould 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",
우리의 예에서 이것들은테스트 프로젝트로 돌아가서 카마 설정을 완성합시다.테스트 프레임워크로 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**
여기서 너는 몇 가지 재미있는 곳을 주의할 수 있다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개의 테스트가 실패했다고 알려 줍니다.그 결과 오류에 대한 유용한 정보도 포함되어 있다.오류 메시지 포함그래.이전의 변경 사항을 복구해서 테스트를 복구합시다.테스트를 중지하려면 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의 기본 설정이자 고급 설정의 시작점입니다.기본 설정부터 시작해서 정상적으로 작동할 수 있다고 확신할 때 고급 설정으로 전환하는 것을 권장합니다. 이것은 현재 웹 프로젝트의 사전 처리 절차를 포함합니다.
Reference
이 문제에 관하여(2021년에는 카마를 사용하여 자바스크립트에 대한 유닛 테스트를 수행합니다.출발점), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/maksimrv/unit-testing-javascript-with-karma-in-2021-starting-point-5dml텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)