Sinon Tutorial : Mocks, Spies & Stubs를 사용한 JavaScript 테스트-JS 튜토리얼-php.cn

스파이 (및 스터브)를 사용하는 대부분의 테스트 사례에서는 테스트 결과를 확인하는 방법이 필요합니다.

우리는 모든 유형의 주장을 사용하여 결과를 확인할 수 있습니다. 콜백에 대한 이전 예에서는 Chai의 Assert 함수를 사용하여 값이 실제 값임을 보장합니다.

이를 수행하는 단점은 실패에 대한 오류 메시지가 불분명하다는 것입니다. "거짓은 사실이 아니다"또는 이와 유사한 프롬프트 만 받게됩니다. 당신이 상상할 수 있듯이, 이것은 문제가 어디에 있는지 알아내는 데 그다지 도움이되지 않으며 테스트의 소스 코드를 살펴 봐야합니다. 재미 있지 않습니다.

이 문제를 해결하기 위해 어설 션에 사용자 정의 오류 메시지를 포함시킬 수 있습니다.

그러나 우리가

Sinon의 자신의 주장을 사용할 수있을 때 왜 귀찮게합니까

<code class="language-javascript">var spy = sinon.spy();

//我们可以像函数一样调用间谍
spy('Hello', 'World');

//现在我们可以获取有关调用的信息
console.log(spy.firstCall.args); //输出：['Hello', 'World']
</code>

이와 같은 Sinon의 주장을 사용하면 즉시 더 나은 오류 메시지를 제공 할 수 있습니다. 기능의 매개 변수와 같은보다 복잡한 조건을 검증해야 할 때 유용합니다.

다음은 Sinon이 제공 한 다른 유용한 주장입니다.

sinon.assert.calledwith는 기능이 특정 매개 변수로 호출되었는지 확인할 수 있습니다 (아마도 내가 가장 많이 사용하는 것일 수 있음) sinon.assert.callorder는 함수가 특정 순서로 호출되었는지 확인할 수 있습니다 <code class="language-javascript">var user = { ... setName: function(name){ this.name = name; } } //为 setName 函数创建一个间谍 var setNameSpy = sinon.spy(user, 'setName'); //现在，每当我们调用该函数时，间谍都会记录有关它的信息 user.setName('Darth Vader'); //我们可以通过查看间谍对象来查看 console.log(setNameSpy.callCount); //输出：1 //重要最后一步 - 删除间谍 setNameSpy.restore(); </code>

스파이와 같은 Sinon의 주장 문서에는 사용 가능한 모든 옵션이 포함되어 있습니다. Chai를 사용하기를 원한다면 Sinon-Chai 플러그인도 사용 가능하므로 Chai의 기대 또는 인터페이스를 통해 Sinon Assertions를 사용할 수 있습니다. 스터브 스터브는 유연하고 편리하기 때문에 선호하는 테스트 스탠드입니다. 그들은 스파이의 모든 기능을 가지고 있지만, 모니터링 기능의 역할 이상의 것이며 스터브는 그것을 완전히 대체합니다. 다시 말해, 스파이를 사용할 때 원래 함수는 여전히 실행되지만 스터브를 사용할 때는 실행되지 않습니다.

이것은 다음과 같은 많은 작업에 스터브가 매우 적합합니다.

<code class="language-javascript">function myFunction(condition, callback){
  if(condition){
    callback();
  }
}

describe('myFunction', function() {
  it('should call the callback function', function() {
    var callback = sinon.spy();

    myFunction(true, callback);

    assert(callback.calledOnce);
  });
});
</code>

테스트를 느리고 쓰기가 어려워지는 ajax 또는 기타 외부 통화를 대체하십시오.

 함수 출력 <p>에 따라 다른 코드 경로를 트리거합니다
<tions> 예외가 발생하면 어떻게 되는가? </tions></p>
<p>
<can> 우리가 스터브를 만들 수있는 방법은 스파이와 비슷합니다 ... </can></p>
<ul>
<an> 우리는 스파이와 같은 익명의 스터브를 만들 수 있지만 기존 기능을 스터브로 바꿀 때 스터브가 매우 유용 해집니다. <li>
예를 들어 <if> jQuery의 Ajax 함수를 사용하는 코드가있는 경우 테스트하기가 어렵습니다. 코드는 우리가 구성하는 모든 서버에 요청을 보내므로 테스트 환경에서 수행하지 않도록 코드에 특별한 케이스를 추가해야합니다. 이는 큰 금기입니다. 코드에 테스트 별 사례를 거의 포함시키지 않아야합니다. </if>
</li>
<to> 나쁜 관행으로 전환하는 대신 Sinon을 사용하고 Ajax 기능을 스터브로 바꿀 수 있습니다. 이것은 테스트를 사소하게 만듭니다. <li><sample> 이것은 우리가 테스트 할 샘플 기능입니다. 객체를 매개 변수로 사용하여 AJAX를 통해 사전 정의 된 URL로 보냅니다. <p>
</p>
<ing> 일반적으로 Ajax 호출 및 사전 정의 된 URL로 인해이 테스트가 어려울 수 있지만 Stubs를 사용하면 쉬워집니다. <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-javascript&quot;&gt;var spy = sinon.spy();

//我们可以像函数一样调用间谍
spy('Hello', 'World');

//现在我们可以获取有关调用的信息
console.log(spy.firstCall.args); //输出：['Hello', 'World']
&lt;/code&gt;</pre>
<want> 요청이 완료된 후 SaveUser로 전달 된 콜백 함수가 올바르게 호출되는지 확인하십시오. <p>
</p>
<replace> 여기서, 우리는 Ajax 함수를 스터브로 바꿉니다. 즉, 요청이 전송되지 않고 서버 나 다른 것이 필요하지 않음을 의미합니다. 테스트 코드에서 진행되는 일을 완전히 제어 할 수 있습니다! <p>
<to> 우리는 우리가 SaveUser로 전달되는 콜백이 호출되도록하기를 원하기 때문에 Stub </to></p> 수율 를 지시합니다. 이는 스텁이 자동으로 전달 된 첫 번째 함수를 매개 변수로 호출 함을 의미합니다. 이것은 요청이 완료된 후 콜백을 호출하는 $ .post의 동작을 시뮬레이션합니다. <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-javascript&quot;&gt;var user = {
  ...
  setName: function(name){
    this.name = name;
  }
}

//为 setName 函数创建一个间谍
var setNameSpy = sinon.spy(user, 'setName');

//现在，每当我们调用该函数时，间谍都会记录有关它的信息
user.setName('Darth Vader');

//我们可以通过查看间谍对象来查看
console.log(setNameSpy.callCount); //输出：1

//重要最后一步 - 删除间谍
setNameSpy.restore();
&lt;/code&gt;</pre>
<the> 스터브 외에도이 테스트에서 스파이를 만들었습니다. 정상적인 기능을 콜백으로 사용할 수 있지만 스파이를 사용하면 Sinon 's Sinon.assert.calledonce Assertion을 사용하여 테스트 결과를 쉽게 확인할 수 있습니다. <p>
 대부분의 경우 스터브가 필요할 때 동일한 기본 패턴을 따를 수 있습니다.
</p>
<in> $ .post 와 같은 문제의 함수를 찾으십시오
<works> 테스트에서 조롱 할 수 있도록 작동 방식을보기 <em>
<ub> 스터브를 만듭니다
<ub> 테스트에서 원하는 동작을 갖도록 스텁을 설정하십시오.
</ub></ub></em>
<do> 스텁은 각 동작을 시뮬레이션 할 필요가 없습니다. 테스트에 필요한 유일한 행동이 필요하며 다른 것은 생략 될 수 있습니다. </do></works></in></the></replace></want></ing></sample></li></to></an>
</ul>

<code class="language-javascript">var spy = sinon.spy(); //我们可以像函数一样调用间谍 spy('Hello', 'World'); //现在我们可以获取有关调用的信息 console.log(spy.firstCall.args); //输出：['Hello', 'World'] </code>

위의 예제 코드에는 stub.restore ()가 없음 - 테스트가 샌드 박스가 있으므로 불필요합니다.

가능할 때마다 sinon.test ()를 사용하는 경우 오류로 인해 테스트 독립형을 정리하지 않고 조기 테스트로 인해 테스트가 무작위로 실패하는 문제를 피할 수 있습니다.

Sinon은 마법이 아닙니다 Sinon은 많은 작업을 수행하며 때로는 작동 방식을 이해하기 어려울 수 있습니다. Sinon의 작동 방식에 대한 간단한 JavaScript 예제를 살펴 보겠습니다. 이렇게하면 다른 상황에서 더 효율적으로 사용하는 데 도움이됩니다.

우리는 또한 스파이, 스터브 및 시뮬레이션을 수동으로 만들 수 있습니다. 우리가 Sinon을 사용하는 이유는 작업을 사소하게 만들기 때문입니다. 수동으로 만드는 것은 매우 복잡 할 수 있지만 Sinon이하는 일을 이해하는 방법을 살펴 보겠습니다.

~~우선 스파이는 본질적으로 기능 래퍼입니다 :~~

사용자 정의 함수를 사용하여 쉽게 스파이 기능을 얻을 수 있습니다. 그러나 Sinon의 스파이는 주장 지원을 포함하여 더 넓은 범위의 기능을 제공합니다. 이것은 Sinon을 더 편리하게 만듭니다.

스터브는 어떻습니까?

매우 간단한 스터브를 만들려면 기능을 새로운 기능으로 간단히 바꿀 수 있습니다.

그러나 그러나 Sinon의 스터브는 몇 가지 장점을 제공합니다 :

에는 전체 스파이 기능 가 포함되어 있습니다 stub.restore () 를 사용하여 원래 동작을 쉽게 복원 할 수 있습니다. 당신은 Sinon Stubs

에 대해 주장 할 수 있습니다

<code class="language-javascript">var spy = sinon.spy();

//我们可以像函数一样调用间谍
spy('Hello', 'World');

//现在我们可以获取有关调用的信息
console.log(spy.firstCall.args); //输出：['Hello', 'World']
</code>

시뮬레이션은 스파이와 스터브의 동작을 결합하여 기능이 다른 방식으로 사용할 수 있도록합니다.

Sinon은 때때로 많은 "마법"을 한 것처럼 보이지만 대부분의 경우 자신의 코드로 쉽게 수행 할 수 있습니다. Sinon은 그 목적을 위해 자체 라이브러리를 쓰지 않고 사용하기에 훨씬 더 편리합니다.

결론 실제 코드 테스트는 때때로 너무 복잡해 보이며 쉽게 포기할 수 있습니다. 그러나 Sinon의 경우 거의 모든 유형의 코드를 테스트하는 것이 바람이됩니다.

주 원칙을 기억하십시오. 기능으로 인해 테스트를 작성하기가 어렵다면 테스트 스탠드 인으로 교체하십시오. 이 원칙은 함수의 수행에 관계없이 적용됩니다.

자신의 코드에 Sinon을 적용하는 방법을 알고 싶습니까? 내 웹 사이트를 방문하면 Sinon 모범 사례의 세 가지 실제 사례와 다양한 유형의 테스트 상황에 적용하는 방법이 포함 된 무료 현실 세계 Sinon 가이드를 보내 드리겠습니다!

Sinon.js 테스트에 대한 FAQS (FAQ) Sinon.js의 모의, 스파이 및 스터브의 차이점은 무엇입니까?

<code class="language-javascript">var user = {
  ...
  setName: function(name){
    this.name = name;
  }
}

//为 setName 函数创建一个间谍
var setNameSpy = sinon.spy(user, 'setName');

//现在，每当我们调用该函数时，间谍都会记录有关它的信息
user.setName('Darth Vader');

//我们可以通过查看间谍对象来查看
console.log(setNameSpy.callCount); //输出：1

//重要最后一步 - 删除间谍
setNameSpy.restore();
</code>

Sinon.js에서는 <..> 모의, 스파이 및 스터브는 다른 용도를 가지고 있습니다. 스파이는 매개 변수, 반환 값,이 값 및 예외 (있는 경우)를 모두 기록하는 함수입니다. 기능 호출 및 응답을 추적하는 데 사용할 수 있습니다. 스터브는 스파이와 비슷하지만 사전 프로그래밍 된 동작이 있습니다. 또한 호출 방법에 대한 정보를 기록하지만 스파이와 달리 방법이 오류를 던지거나 특정 값을 반환하는 방법의 동작을 제어하는 데 사용할 수 있습니다. 시뮬레이션은 사전 프로그래밍 된 동작 (예 : 스터브)과 사전 프로그래밍 된 기대 (예 : SPY)를 가진 잘못된 방법입니다.

JavaScript에서 단위 테스트에 Sinon.js를 사용하는 방법은 무엇입니까?

sinon.js는 JavaScript 테스트에서 스파이, 스터브 및 모의를 만드는 강력한 도구입니다. 사용하려면 먼저 HTML에서 스크립트 태그를 사용하거나 NPM을 통해 설치하여 프로젝트에 포함시켜야합니다. 일단 포함되면 API를 사용하여 스파이, 스터브 및 모의를 만들고 관리 할 수 있습니다. 그런 다음 테스트중인 코드를 격리하고 예상대로 작동하는지 확인하는 데 사용될 수 있습니다.

Sinon.js에서 스파이를 만드는 방법?

Sinon.js에서 스파이를 만드는 것은 간단합니다. Sinon.spy () 함수를 호출하면됩니다. 이렇게하면 테스트에서 사용할 수있는 스파이 기능이 반환됩니다. 스파이는 호출 방법에 대한 정보를 기록한 다음 테스트를 체크인 할 수 있습니다. 예를 들어, 스파이가 몇 번이나 호출되는지, 어떤 매개 변수를 호출하는 데 사용되는지, 반환 내용을 확인할 수 있습니다.

sinon.js에서 스터브를 만드는 방법?

sinon.js에서 스터브를 만들려면 sinon.stub () 함수를 호출해야합니다. 이렇게하면 테스트에서 사용할 수있는 스터브 기능이 반환됩니다. 스터브는 스파이처럼 행동하여 호출 방법에 대한 정보를 녹음하지만 동작을 제어 할 수 있습니다. 예를 들어, 스텁에 오류를 던지거나 특정 값을 반환 할 수 있습니다.

Sinon.js에서 모의를 만드는 방법?

Sinon.js에서 모의 생성에는 Sinon.Mock () 함수를 호출해야합니다. 이렇게하면 테스트에서 사용할 수있는 모의 개체가 반환됩니다. Mock Object는 스파이처럼 행동하고 호출 방법에 대한 정보를 기록하며 스터브와 유사하여 동작을 제어 할 수 있습니다. 그러나 그것은 또한 그것을 호출하는 방법에 대한 기대를 설정할 수 있습니다.

다른 테스트 프레임 워크와 함께 sinon.js를 사용하는 방법은 무엇입니까?

sinon.js는 JavaScript 테스트 프레임 워크와 함께 사용되도록 설계되었습니다. 독립형 테스트 프레임 워크를 제공하지만 Mocha, Jasmine 및 Qunit과 같은 다른 인기있는 테스트 프레임 워크와 통합 될 수도 있습니다. Sinon.js 문서는 이러한 테스트 프레임 워크 및 기타 테스트 프레임 워크와 통합의 예를 제공합니다.

스터브 또는 스파이를 원래 함수로 복원하는 방법은 무엇입니까?

기능을 스터브 또는 스파이로 대체 한 경우 스터브 또는 스파이에서 .restore () 메소드를 호출하여 원래 기능을 복원 할 수 있습니다. 스텁 또는 스파이가 다른 테스트에 영향을 미치지 않도록 테스트 후 정리하려는 경우 유용합니다.

스파이가 특정 매개 변수로 호출되었는지 확인하는 방법은 무엇입니까?

sinon.js는 스파이를 호출하는 방법을 확인하는 몇 가지 방법을 제공합니다. 예를 들어 .CalledWith () 메소드를 사용하여 특정 매개 변수로 스파이가 호출되었는지 확인할 수 있습니다. .calledoncewith () 메소드를 사용하여 스파이가 특정 매개 변수로 한 번만 호출되었는지 확인할 수도 있습니다.

스터브를 특정 값으로 반환하는 방법은 무엇입니까?

.returns () 메소드를 사용하여 스텁을 특정 값으로 반환 할 수 있습니다. 예를 들어, Mystub이라는 스터브가있는 경우 Mystub.returns ( 'foo')를 호출하여 'foo'값을 반환 할 수 있습니다.

스터브를 오류로 만드는 방법은 무엇입니까?

.throws () 메소드를 사용하여 스텁에 오류를 던질 수 있습니다. 예를 들어, mystub라는 스터브가있는 경우 mystub.throws ()를 호출하여 오류를 던질 수 있습니다. 기본적으로 오류 객체가 발생하지만 오류 이름을 매개 변수로 전달하여 특정 유형의 오류를 던질 수도 있습니다.

Sinon Tutorial : Mocks, Spies & Stubs를 사용한 JavaScript 테스트

요컨대, Sinon은 테스트의 어려운 부분을 테스트를 간단하게 만드는 것과 교체 할 수 있습니다.

스파이 (및 스터브)를 사용하는 대부분의 테스트 사례에서는 테스트 결과를 확인하는 방법이 필요합니다.

위의 예제 코드에는 stub.restore ()가 없음 - 테스트가 샌드 박스가 있으므로 불필요합니다.

결론 실제 코드 테스트는 때때로 너무 복잡해 보이며 쉽게 포기할 수 있습니다. 그러나 Sinon의 경우 거의 모든 유형의 코드를 테스트하는 것이 바람이됩니다.

관련 기사