Mocha와 Chai를 사용하여 JavaScript를 테스트하십시오

아래 : 스크립트를 추가 한 후에는 선택한 브라우저에 테스트 러너 페이지를로드 할 수 있습니다. 테스트 결과 테스트를 실행할 때 테스트 결과는 다음과 같습니다.

우리가 설명에 입력 한 내용과 IT 기능은 출력에 나타납니다. 테스트는 설명에 따라 그룹화됩니다. 추가 하위 그룹을 만들기 위해 블록을 설명하는 것도 가능합니다.

실패한 테스트가 어떻게 보이는지 살펴 보겠습니다.

<!-- load your test files here -->

테스트에서 라인에서 :

숫자 0을 1로 바꾸십시오. 배열의 길이가 더 이상 예상 값과 일치하지 않기 때문에 테스트가 실패합니다. 테스트를 다시 실행하면 잘못된 일에 대한 설명으로 실패 테스트가 빨간색으로 표시됩니다.

테스트의 이점 중 하나는 버그를 더 빨리 찾는 데 도움이되지만이 오류는 그 점에서 그다지 도움이되지 않습니다. 우리는 그것을 고칠 수 있습니다.

대부분의 어설 션 함수는 선택적 메시지 매개 변수를 취할 수도 있습니다. 이것은 주장이 실패 할 때 표시되는 메시지입니다. 이 매개 변수를 사용하여 오류 메시지를 쉽게 이해할 수 있도록하는 것이 좋습니다.

우리는 다음과 같이 주장에 메시지를 추가 할 수 있습니다 :

테스트를 다시 실행하면 기본값 대신 사용자 정의 메시지가 나타납니다. 어설 션을 다시 한대로 다시 전환하겠습니다. 1로 1로 교체하고 테스트를 다시 실행하여 통과하십시오. 함께 모으는

지금까지 우리는 상당히 간단한 예를 살펴 보았습니다. 우리가 배운 것을 실제로 넣고보다 현실적인 코드를 테스트하는 방법을 살펴 보겠습니다. 다음은 CSS 클래스를 요소에 추가하는 함수입니다. 이것은 새 파일 js/classname.js. 로 이동해야합니다 좀 더 흥미롭게 만들기 위해, 나는 그 클래스가 요소의 클래스 이름 속성에 존재하지 않을 때만 새로운 클래스를 추가하게 만들었습니다. 최선의 경우, 우리는이 기능에 대한 테스트를

전에 작성합니다. 우리는 코드를 작성합니다. 그러나 테스트 중심의 개발은 복잡한 주제이며 지금은 테스트 작성에 집중하고 싶습니다. 시작하려면 단위 테스트의 기본 아이디어를 기억하겠습니다. 기능에 특정 입력을 제공 한 다음 기능이 예상대로 동작을 확인합니다. 이 기능의 입력과 동작은 무엇입니까?

요소와 클래스 이름이 주어졌습니다

요소의 클래스 이름 속성에 클래스 이름이 포함되어 있지 않으면 추가해야합니다. 요소의 클래스 이름 속성에 클래스 이름이 포함되어 있으면 추가해서는 안됩니다.
• 이 사례를 두 가지 테스트로 번역하겠습니다. 테스트 디렉토리에서 새 파일 classnametest.js를 생성하고 다음을 추가하십시오.
우리는 문구를 테스트와 함께 사용하는 "x"형식으로 약간 변경했습니다. 이것은 조금 더 잘 읽지 만 본질적으로 우리가 위에 나열된 인간 읽을 수있는 형태와 동일합니다. 일반적으로 아이디어에서 테스트로가는 것이 이것보다 그리 어렵지 않습니다.
• 하지만 기다려, 테스트 기능은 어디에 있습니까? 글쎄, 우리가 두 번째 매개 변수를 생략하면, Mocha는이 테스트를 테스트 결과에서
보류

로 표시합니다. 이것은 여러 가지 테스트를 설정하는 편리한 방법입니다. 글을 쓰려고하는 것의 할 일 목록과 비슷합니다. 첫 번째 테스트를 구현하여 계속하겠습니다

이 테스트에서는 요소 변수를 생성하여 문자열 테스트 클래스 (추가 할 새 클래스)와 함께 AddClass 함수에 매개 변수로 전달됩니다. 그런 다음 어설 션을 사용하여 클래스가 값에 포함되어 있는지 확인합니다.

다시, 우리는 우리의 초기 아이디어에서 나왔습니다 - 요소와 클래스 이름이 주어지면 클래스 목록에 추가되어야하고 상당히 간단한 방식으로 코드로 변환했습니다. 이 기능은 DOM 요소와 함께 작동하도록 설계되었지만 여기에는 일반 JS 객체를 사용하고 있습니다. 때때로 우리는 테스트를 단순화하기 위해 이러한 방식으로 JavaScript의 역동적 인 특성을 활용할 수 있습니다. 이 작업을 수행하지 않으면 실제 요소를 만들어야하며 테스트 코드가 복잡 해집니다. 추가 혜택으로 DOM을 사용하지 않기 때문에 원하는 경우 Node.js 내 에서이 테스트를 실행할 수도 있습니다. 브라우저에서 테스트를 실행합니다 브라우저에서 테스트를 실행하려면 Classname.js 및 Clastnametest.js를 러너에 추가해야합니다.

<!-- load your test files here -->

이제 하나의 테스트 패스와 다른 테스트가 다음 코드펜에서 보여 주듯이 보류중인대로 나타납니다. 코드는 코드 환경 내에서 코드를 작동시키기 위해 코드가 예제와 약간 다릅니다. Codepen에서 Sitepoint (@SitePoint)의 Mocha (1)로 펜 단위 테스트를 참조하십시오. 다음, 두 번째 테스트를 구현합시다.…

테스트를 자주 실행하는 것은 좋은 습관이므로 지금 테스트를 실행하면 어떻게되는지 확인해 봅시다. 예상대로 통과해야합니다.

다음은 두 번째 테스트가 구현 된 또 다른 코드펜입니다 Codepen에서 Sitepoint (@SitePoint)의 Mocha (2)로 펜 단위 테스트를 참조하십시오.하지만 어울려! 나는 실제로 당신을 조금 속였다. 우리가 고려하지 않은이 기능의 세 번째 동작이 있습니다. 이 기능에는 버그가 있습니다. 상당히 심각한 것입니다. 3 줄 기능이지만 눈치 채 셨나요?

버그를 보너스로 노출시키는 세 번째 동작에 대한 테스트를 한 번 더 쓰자.

이번에는 테스트가 실패합니다. 다음 코드펜에서 작동하는 것을 볼 수 있습니다. 여기서 문제는 간단합니다. 요소의 CSS 클래스 이름은 공간으로 분리되어야합니다. 그러나 현재 AddClass의 구현은 공간을 추가하지 않습니다!

Codepen에서 Sitepoint (@SitePoint)의 Mocha (3)로 펜 단위 테스트를 참조하십시오. 함수를 수정하고 테스트 패스를합시다

그리고 고정 된 기능과 통과 테스트가있는 최종 코드 펜이 있습니다.

<!-- load your test files here -->

Codepen에서 Sitepoint (@SitePoint)의 Mocha (4)로 펜 단위 테스트를 참조하십시오. 노드에서 테스트를 실행합니다 노드에서는 같은 파일의 다른 것들에만 볼 수 있습니다. classname.js 및 classnametest.js는 다른 파일에 있으므로 다른 파일에 노출되는 방법을 찾아야합니다. 이를 수행하는 표준 방법은 module.exports를 사용하는 것입니다. 새로 고침이 필요한 경우 여기에서 모든 내용을 읽을 수 있습니다. node.js 코드는 본질적으로 동일하게 유지되지만 약간 다르게 구성됩니다.

그리고 보시다시피 테스트는 통과합니다.

> 다음은 무엇입니까?

알 수 있듯이 테스트가 복잡하거나 어려울 필요는 없습니다. JavaScript 앱을 작성하는 다른 측면과 마찬가지로 반복되는 몇 가지 기본 패턴이 있습니다. 일단 익숙해지면 계속해서 계속 사용할 수 있습니다.

그러나 이것은 단지 표면을 긁는 것입니다. 단위 테스트에 대해 배우는 것이 훨씬 더 많습니다.

assert.equal(arr.length, 0);

더 복잡한 시스템 테스트

Ajax, 데이터베이스 및 기타 "외부"물건을 다루는 방법? 테스트 중심 개발

이것을 계속 배우려면 무료 JavaScript 장치 테스트 QuickStart 시리즈를 만들었습니다. 이 기사가 유용하다는 것을 알게되면 여기에서 확인해야합니다.

또는 비디오가 더 많은 스타일 인 경우 itepoint premium의 코스 : node.js. Mocha와 Chai 에 대한 질문이 자주 묻는 질문 JavaScript로 단위 테스트를 위해 Mocha 및 Chai를 설치하려면 어떻게합니까?

Mocha 및 Chai를 설치하려면 시스템에 Node.js 및 NPM이 설치되어 있어야합니다. 이 경우 NPM을 사용하여 Mocha와 Chai를 설치할 수 있습니다. 터미널을 열고 프로젝트 디렉토리로 이동하십시오. 그런 다음 다음 명령을 실행하십시오.

npm 설치--save-dev mocha chai

이 명령은 프로젝트의 devdependencies로 Mocha와 Chai를 설치합니다. -save-dev 플래그는 package.json 파일의 개발 종속성으로 이것들을 추가하는 데 사용됩니다.

Mocha and Chai를 사용하여 기본 테스트를 작성하는 방법은 무엇입니까?

기본 테스트 작성 Mocha와 Chai는 테스트 파일을 만들고 테스트 케이스를 작성하는 것이 포함됩니다. 간단한 예는 다음과 같습니다.
var expect = require ( 'chai'). 기대;

설명 ( 'Basic Mocha 문자열 테스트', function () {

it ( '반환해야합니다. 문자열에있는 charachter의 수, function () {

epction ( 'hello'). 이 예제는 관련 테스트를 그룹화하는 테스트 스위트이며 테스트 사례입니다. Chai의 기대 함수는 예상 출력을 주장하는 데 사용됩니다.

모카 테스트를 어떻게 실행할 수 있습니까?

mocha 테스트를 실행하려면 터미널의 프로젝트 디렉토리로 이동하여 다음을 실행합니다. 다음 명령 :
./ node_modules/.bin/mocha
이 명령은 node_modules 폴더에 설치된 Mocha binary를 실행합니다. 이 명령을 단순히 Mocha로 실행하려면 NPM Install -G Mocha를 사용하여 전 세계적으로 Mocha를 설치할 수 있습니다.
Chai에서 사용할 수있는 다른 어설 션 스타일은 무엇입니까?

Chai는 세 가지 다른 주장을 제공합니다. 스타일 - 기대하고, 주장해야합니다. 해야 할 스타일은 각 객체를 체인을 시작하기 위해해야 ​​할 속성으로 확장합니다. 기대 스타일은보다 전통적인 기능 기반 접근법을 제공합니다. Assert 스타일은 고전적이고 간단한 어설 션을 제공합니다.
Mocha와 Chai를 사용하여 비동기 코드를 테스트하는 방법은 무엇입니까?
Mocha와 Chai는 비동기 코드를 테스트하는 몇 가지 방법을 제공합니다. 콜백, 약속 또는 비동기/기다릴 수 있습니다. Async/Await을 사용하는 예는 다음과 같습니다.
it ( 'Async test', async function () { const result = await myasyncfunction (); expost (result) .to.equal (expectresult) ); });

이 예에서, myasyncfunction은 약속을 반환하는 비동기 기능입니다. Await 키워드는 테스트를 계속하기 전에 약속이 해결 될 때까지 기다리는 데 사용됩니다. Mocha에서 고리를 어떻게 사용할 수 있습니까?

Mocha는 The Preconditions, Eftereach 및 Aftereach와 같은 후크를 제공하여 전제 조건을 설정하고 테스트 후 청소하는 데 사용할 수 있습니다. 예는 다음과 같습니다.

설명 ( 'hooks', function () {});
after (function () {
//이 블록에서 마지막 테스트 후 한 번 실행됩니다 });
evereach (function () {
// 이전에 실행됩니다. 이 블록의 각 테스트 });
apfeach (function () {
//이 블록에서 각 테스트 후 실행됩니다
});
});
chai로 예외를 테스트 할 수있는 방법은 무엇입니까?

Chai는 테스트 예외에 대한 던지기 주장을 제공합니다. 예는 다음과 같습니다.
it ( '오류를 던지기', function () {});

이 예에서는 함수가 오류가 발생합니다. 던지기 어설 션은이 기능이 '잘못된 가치'로 오류를 던진다 고 주장하는 데 사용됩니다.
Mocha와 Chai와 함께 스파이, 스터브 및 모의를 사용하려면 어떻게해야합니까?

Mocha와 Chai와 함께 스파이, 스터브 및 모의는 Sinon.js와 같은 도서관을 사용할 수 있습니다. Sinon.js는 이러한 기능을 제공하기 위해 Mocha 및 Chai와 쉽게 통합 될 수 있습니다.
Mocha로 테스트 보고서를 생성하는 방법은 무엇입니까?

Mocha는 Spec, DOT를 포함하여 여러 리포터를 지원합니다. , Nyan 등. 테스트를 실행할 때 -reporter 옵션과 함께 사용할 리포터를 지정할 수 있습니다. 예를 들어, Mocha -Reporter Nyan.

Chai를 사용하여 테스트를 더 읽기 쉽게 만들 수 있습니까?

Chai는 주장을 구성하는 연쇄 언어를 제공하여 테스트를보다 읽을 수 있도록합니다. 예를 들어, expect (myvar) .to.be.true;를 작성하는 대신 expling (myvar) .to.be.true;. 이것은 시험을 더 자연스럽고 이해하기 쉽게 만듭니다.

위 내용은 Mocha와 Chai를 사용하여 JavaScript를 테스트하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!