<div id="readability-page-1" class="page"><time>2021. 6. 18. 06:47</time>
 
 
 <a href="#comment" onclick="Utils.smoothScroll(this);return false">
 
 </a>
 
 
 
 
 
 
 
 <div>
 using matchers : <a href="https://jestjs.io/docs/using-matchers" target="_blank" rel="noopener">https://jestjs.io/docs/using-matchers</a>

matcher란 이거 맞아? 라고 물어보는 메서드입니다. 기대한 값이 실제 반환된 값과 일치하는 지를 확인하는 작업인 것이죠.
모든 matcher를 확인해보고 싶다면 expect에 대한 api 상세서&nbsp;<a href="https://jestjs.io/docs/expect">https://jestjs.io/docs/expect</a>&nbsp;를 참고합시다.
<figure id="og_1623965898587" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="Expect · Jest" data-og-description="When you're writing tests, you often need to check that values meet certain conditions. expect gives you access to a number of &quot;matchers&quot; that let you validate different things." data-og-host="jestjs.io" data-og-source-url="https://jestjs.io/docs/expect" data-og-url="https://jestjs.io/docs/expect" data-og-image="https://scrap.kakaocdn.net/dn/bC0tRU/hyKAiCdS3S/LTRXq8ukwK2WmHOCtimdl0/img.png?width=796&amp;height=416&amp;face=0_0_796_416,https://scrap.kakaocdn.net/dn/dsTi8p/hyKBBNG4ap/knK8Yb3GnvFdzYtH4v3Ei0/img.png?width=796&amp;height=416&amp;face=0_0_796_416"><a href="https://jestjs.io/docs/expect" target="_blank" rel="noopener" data-source-url="https://jestjs.io/docs/expect">

<div>
Expect · Jest
When you're writing tests, you often need to check that values meet certain conditions. expect gives you access to a number of "matchers" that let you validate different things.
jestjs.io
</div>
</a><img src="https://scrap.kakaocdn.net/dn/bC0tRU/hyKAiCdS3S/LTRXq8ukwK2WmHOCtimdl0/img.png?width=796&amp;height=416&amp;face=0_0_796_416,https://scrap.kakaocdn.net/dn/dsTi8p/hyKBBNG4ap/knK8Yb3GnvFdzYtH4v3Ei0/img.png?width=796&amp;height=416&amp;face=0_0_796_416"></figure>


일치 판단

일반적인 원시값 체크에는 toBe가 사용됩니다.
<pre id="code_1623963842268" data-ke-language="javascript" data-ke-type="codeblock"><code>test('1+2=3. quick math!', () =&gt; {
 expect(1 + 2).toBe(3);
});

test('object test', () =&gt; {
 const me = { name: 'darren', age: 100 };
 expect(me.name).toBe('darren');
});

// not을 통해 무엇이 아님을 테스트할 수 있음.
test('not 4', () =&gt; {
 expect(1 + 2).not.toBe(4);
});</code></pre>

레퍼런스 타입의 값에 대한 일치를 체킹하려면 toEqual을 사용합니다. object 형 값들은 애초에 할당되는 메모리 주소가 다르자나여~&nbsp;
<pre id="code_1623964372395" data-ke-language="javascript" data-ke-type="codeblock"><code>new Object() === new Object() // false. 할당되는 메모리 주소가 다름.</code></pre>
<pre id="code_1623964216910" data-ke-language="javascript" data-ke-type="codeblock"><code>const makingGame = money =&gt; {
 if (money &gt; 1000) return { name: 'goodGame', money };
 else return { name: 'xhitGame', money };
};

test('should return goodGame', () =&gt; {
 expect(makingGame(1200)).toEqual({ name: 'goodGame', money: 1200 });
});
</code></pre>

toEqual대신에 toStrictEqual을 사용하여 좀 더 엄격하게 검수하는 방법도 있습니다.
<a href="https://jestjs.io/docs/expect#tostrictequalvalue">https://jestjs.io/docs/expect#tostrictequalvalue</a>
<pre id="code_1623967032062" data-ke-language="javascript" data-ke-type="codeblock"><code>class Factory {
 constructor(name) {
 this.name = name;
 }
}

test('instance', () =&gt; {
 const fanOne = new Factory('fan');

 expect(fanOne).toEqual({ name: 'fan' }); // pass
 expect(fanOne).toStrictEqual({ name: 'fan' }); // fail
});
</code></pre>


<h4 data-ke-size="size20">class</h4>
특정 클래스의 인스턴스인지 체크합니다. toBeInstanceOf
<pre id="code_1623966928627" data-ke-language="javascript" data-ke-type="codeblock"><code>class Factory {
 constructor(name) {
 this.name = name;
 }
}

test('instance', () =&gt; {
 const fanOne = new Factory('fan');

 expect(fanOne).toBeInstanceOf(Factory);
});
</code></pre>



참/거짓

참거짓 판단에서 falsy, truthy한 값들을 처리하기 위해 아래와 같은 Matcher들을 사용합니다.
undefined, null, and false을 다르게 처리하고 싶다면 toBeNull, toBeUndefined, toBeDefined를 사용하시고
단순히 falsy, truthy를 체킹하고 싶다면 toBeTruthy, toBeFalsy를 사용합니다.
<ul data-ke-list-type="disc">
<li>toBeNull&nbsp;matches only&nbsp;null</li>
<li>toBeUndefined&nbsp;matches only&nbsp;undefined</li>
<li>toBeDefined&nbsp;is the opposite of&nbsp;toBeUndefined</li>
<li>toBeTruthy&nbsp;matches anything that an&nbsp;if&nbsp;statement treats as true</li>
<li>toBeFalsy&nbsp;matches anything that an&nbsp;if&nbsp;statement treats as false</li>
</ul>
<pre id="code_1623964820561" data-ke-language="javascript" data-ke-type="codeblock"><code>test('my gf is null', () =&gt; {
 const myGirlfriend = null;
 expect(myGirlfriend).toBeNull(); // pass
 expect(myGirlfriend).toBeUndefined(); // fail
 expect(myGirlfriend).toBeDefined(); // fail
 expect(myGirlfriend).toBeTruthy(); // fail
 expect(myGirlfriend).toBeFalsy(); // pass
});
</code></pre>


숫자형 값 비교 판단

&gt;, &gt;=, &lt;, &lt;= 를 확인합니다. 너무 직관적이라 설명은 생략.
<pre id="code_1623964945592" data-ke-language="javascript" data-ke-type="codeblock"><code>test('two plus two', () =&gt; {
 const value = 2 + 2;
 expect(value).toBeGreaterThan(3);
 expect(value).toBeGreaterThanOrEqual(3.5);
 expect(value).toBeLessThan(5);
 expect(value).toBeLessThanOrEqual(4.5);

 // toBe and toEqual are equivalent for numbers
 expect(value).toBe(4);
 expect(value).toEqual(4);
});
</code></pre>

다만, 부동 소수점은 컴퓨터의 근본적인 특성상 소수점에서 정확도 차이가 날 수 밖에 없습니다.
toBeCloseTo를 사용하도록합시다.
<pre id="code_1623965062574" data-ke-language="javascript" data-ke-type="codeblock"><code>test('adding floating point numbers', () =&gt; {
 const value = 0.1 + 0.2;
 //expect(value).toBe(0.3); This won't work because of rounding error
 expect(value).toBeCloseTo(0.3); // This works.
});</code></pre>

문자열 일치, 포함 판단

문자열은 iterable이긴 하지만 원시값이잖아요? toMatch(regex | string) 꼴로 사용하면 됩니다.
<pre id="code_1623965475741" data-ke-language="javascript" data-ke-type="codeblock"><code>// 정규식 사용
test('there is no I in team', () =&gt; {
 expect('team').not.toMatch(/i/i); // case insenstive flags
});

// string도 됨
test('me and you', () =&gt; {
 expect('me and you').toMatch('you');
});</code></pre>


배열과 iterables

길이와 포함 여부를 판단할 수 있습니다.
<pre id="code_1623965755368" data-ke-language="javascript" data-ke-type="codeblock"><code>const shoppingList = [
 'diapers',
 'kleenex',
 'trash bags',
 'paper towels',
 'milk',
];

test('the shopping list test', () =&gt; {
 expect(shoppingList).toHaveLength(5);
 expect(shoppingList).toContain('milk');
 expect(new Set(shoppingList)).toContain('milk');
});

// string은 iterable이니까 ㅎㅎ
test('string test', () =&gt; {
 const str = 'hello';
 expect(str).toHaveLength(5);
 expect(str).toContain('o');
});

</code></pre>

exception

toThrow로 에러를 예측할 수 있음.
<pre id="code_1623966398290" data-ke-language="javascript" data-ke-type="codeblock"><code>function compileAndroidCode() {
 throw new Error('you are using the wrong JDK');
}

test('compiling android goes as expected', () =&gt; {
 expect(() =&gt; compileAndroidCode()).toThrow();
 expect(() =&gt; compileAndroidCode()).toThrow(Error);

 // You can also use the exact error message or a regexp
 expect(() =&gt; compileAndroidCode()).toThrow('you are using the wrong JDK');
 expect(() =&gt; compileAndroidCode()).toThrow(/JDK/);
});
</code></pre>

 
 
					
 
 
 </div></div>

HotHandCoding

DarrenKwon

using matchers : https://jestjs.io/docs/using-matchers
 
matcher란 이거 맞아? 라고 물어보는 메서드입니다. 기대한 값이 실제 반환된 값과 일치하는 지를 확인하는 작업인 것이죠.
모든 matcher를 확인해보고 싶다면 expect에 대한 api 상세서 https://jestjs.io/docs/expect 를 참고합시다.
 
 
일치 판단
 
일반적인 원시값 체크에는 toBe가 사용됩니다.
test('1+2=3. quick math!', () => {
 expect(1 + 2).toBe(3);
});
test('object test', () => {
 const me = { name: 'darren', age: 100 };
 expect(me.name).toBe('darren');
});
// not을 통해 무엇이 아님을 테스트할 수 있음.
test('not 4', () => {
 expect(1 + 2).not.toBe(4);
});
 
레퍼런스 타입의 값에 대한 일치를 체킹하려면 toEqual을 사용합니다. object 형 값들은 애초에 할당되는 메모리 주소가 다르자나여~ 
new Object() === new Object() // false. 할당되는 메모리 주소가 다름.
const makingGame = money => {
 if (money > 1000) return { name: 'goodGame', money };
 else return { name: 'xhitGame', money };
};
test('should return goodGame', () => {
 expect(makingGame(1200)).toEqual({ name: 'goodGame', money: 1200 });
});
 
toEqual대신에 toStrictEqual을 사용하여 좀 더 엄격하게 검수하는 방법도 있습니다.
https://jestjs.io/docs/expect#tostrictequalvalue
class Factory {
 constructor(name) {
 this.name = name;
 }
}
test('instance', () => {
 const fanOne = new Factory('fan');
 expect(fanOne).toEqual({ name: 'fan' }); // pass
 expect(fanOne).toStrictEqual({ name: 'fan' }); // fail
});
 
 
class
특정 클래스의 인스턴스인지 체크합니다. toBeInstanceOf
class Factory {
 constructor(name) {
 this.name = name;
 }
}
test('instance', () => {
 const fanOne = new Factory('fan');
 expect(fanOne).toBeInstanceOf(Factory);
});
 
 
 
참/거짓
 
참거짓 판단에서 falsy, truthy한 값들을 처리하기 위해 아래와 같은 Matcher들을 사용합니다.
undefined, null, and false을 다르게 처리하고 싶다면 toBeNull, toBeUndefined, toBeDefined를 사용하시고
단순히 falsy, truthy를 체킹하고 싶다면 toBeTruthy, toBeFalsy를 사용합니다.
toBeNull matches only null
toBeUndefined matches only undefined
toBeDefined is the opposite of toBeUndefined
toBeTruthy matches anything that an if statement treats as true
toBeFalsy matches anything that an if statement treats as false
test('my gf is null', () => {
 const myGirlfriend = null;
 expect(myGirlfriend).toBeNull(); // pass
 expect(myGirlfriend).toBeUndefined(); // fail
 expect(myGirlfriend).toBeDefined(); // fail
 expect(myGirlfriend).toBeTruthy(); // fail
 expect(myGirlfriend).toBeFalsy(); // pass
});
 
 
숫자형 값 비교 판단
 
>, >=, <, <= 를 확인합니다. 너무 직관적이라 설명은 생략.
test('two plus two', () => {
 const value = 2 + 2;
 expect(value).toBeGreaterThan(3);
 expect(value).toBeGreaterThanOrEqual(3.5);
 expect(value).toBeLessThan(5);
 expect(value).toBeLessThanOrEqual(4.5);
 // toBe and toEqual are equivalent for numbers
 expect(value).toBe(4);
 expect(value).toEqual(4);
});
 
다만, 부동 소수점은 컴퓨터의 근본적인 특성상 소수점에서 정확도 차이가 날 수 밖에 없습니다.
toBeCloseTo를 사용하도록합시다.
test('adding floating point numbers', () => {
 const value = 0.1 + 0.2;
 //expect(value).toBe(0.3); This won't work because of rounding error
 expect(value).toBeCloseTo(0.3); // This works.
});
 
문자열 일치, 포함 판단
 
문자열은 iterable이긴 하지만 원시값이잖아요? toMatch(regex | string) 꼴로 사용하면 됩니다.
// 정규식 사용
test('there is no I in team', () => {
 expect('team').not.toMatch(/i/i); // case insenstive flags
});
// string도 됨
test('me and you', () => {
 expect('me and you').toMatch('you');
});
 
 
배열과 iterables
 
길이와 포함 여부를 판단할 수 있습니다.
const shoppingList = [
 'diapers',
 'kleenex',
 'trash bags',
 'paper towels',
 'milk',
];
test('the shopping list test', () => {
 expect(shoppingList).toHaveLength(5);
 expect(shoppingList).toContain('milk');
 expect(new Set(shoppingList)).toContain('milk');
});
// string은 iterable이니까 ㅎㅎ
test('string test', () => {
 const str = 'hello';
 expect(str).toHaveLength(5);
 expect(str).toContain('o');
});
 
exception
 
toThrow로 에러를 예측할 수 있음.
function compileAndroidCode() {
 throw new Error('you are using the wrong JDK');
}
test('compiling android goes as expected', () => {
 expect(() => compileAndroidCode()).toThrow();
 expect(() => compileAndroidCode()).toThrow(Error);
 // You can also use the exact error message or a regexp
 expect(() => compileAndroidCode()).toThrow('you are using the wrong JDK');
 expect(() => compileAndroidCode()).toThrow(/JDK/);
});

jest (2) : Matcher 사용하여 테스팅하기

댓글