<div id="readability-page-1" class="page"><time>2021. 6. 18. 08:17</time>
 
 
 <a href="#comment" onclick="Utils.smoothScroll(this);return false">
 
 </a>
 
 
 
 
 
 
 
 <div>
 <a href="https://jestjs.io/docs/asynchronous" target="_blank" rel="noopener">https://jestjs.io/docs/asynchronous</a>
<figure id="og_1623969379926" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="Testing Asynchronous Code · Jest" data-og-description="It's common in JavaScript for code to run asynchronously. When you have code that runs asynchronously, Jest needs to know when the code it is testing has completed, before it can move on to another test. Jest has several ways to handle this." data-og-host="jestjs.io" data-og-source-url="https://jestjs.io/docs/asynchronous" data-og-url="https://jestjs.io/docs/asynchronous" data-og-image="https://scrap.kakaocdn.net/dn/sW800/hyKApH6MsC/MJIvSgTLwvIwecVDkqMagK/img.png?width=796&amp;height=416&amp;face=0_0_796_416,https://scrap.kakaocdn.net/dn/foM1V/hyKBEczLGd/b3VD7H0OxeWIknvyWV3ZU0/img.png?width=796&amp;height=416&amp;face=0_0_796_416"><a href="https://jestjs.io/docs/asynchronous" target="_blank" rel="noopener" data-source-url="https://jestjs.io/docs/asynchronous">

<div>
Testing Asynchronous Code · Jest
It's common in JavaScript for code to run asynchronously. When you have code that runs asynchronously, Jest needs to know when the code it is testing has completed, before it can move on to another test. Jest has several ways to handle this.
jestjs.io
</div>
</a><img src="https://scrap.kakaocdn.net/dn/sW800/hyKApH6MsC/MJIvSgTLwvIwecVDkqMagK/img.png?width=796&amp;height=416&amp;face=0_0_796_416,https://scrap.kakaocdn.net/dn/foM1V/hyKBEczLGd/b3VD7H0OxeWIknvyWV3ZU0/img.png?width=796&amp;height=416&amp;face=0_0_796_416"></figure>

비동기 테스트를 잘못 짜면 아래와 같은 경고 문구가 터미널에 출력됩니다.

Jest&nbsp;did&nbsp;not&nbsp;exit&nbsp;one&nbsp;second&nbsp;after&nbsp;the&nbsp;test&nbsp;run&nbsp;has&nbsp;completed. This usually means that there are asynchronous operations that weren't stopped in your tests. Consider running Jest with `--detectOpenHandles` to troubleshoot this issue.

테스트는 끝났는데 jest가 exit하지 못했다는 거죠. 보통 이 경우에는 비동기가 제대로 실행되지 못하고 테스트가 마쳐졌음을 의미합니다. 쉽게 말하자면 "비동기 동작 테스트하려고 기다렸다가 반환되는 값을 보려고 하는데 왜 값을 확인하기도 전에 테스트가 끝나냐?"입니다.

그렇다면 어떻게 짜야하는 걸까요? 문서를 따라가봅시다.


<h4 data-ke-size="size20">콜백 테스트하기</h4>

기본적으로 jest는 함수가 실행되면, 끝나게 됩니다. 그러니까, 아래와 같은 코드에서 콜백은 실행조차 되지 않는 겁니다.
makeStr 함수가 실행되고, 콜백이 호출되기도 전에 테스트가 끝나는 겁니다.
<pre id="code_1623968445821" data-ke-language="javascript" data-ke-type="codeblock"><code>function makeStr(name, money, cb) {
 setTimeout(() =&gt; {
 const str = `${name} has ${money}`;
 return cb(str);
 }, 500);
}


// wrong!!!
test('should ', () =&gt; {
 makeStr('darren', 10000, str =&gt; {
 expect(str).toBe('darren has 200'); // pass???
 });
});</code></pre>

Instead&nbsp;of&nbsp;putting&nbsp;the&nbsp;test&nbsp;in&nbsp;a&nbsp;function&nbsp;with&nbsp;an&nbsp;empty&nbsp;argument,&nbsp;use&nbsp;a&nbsp;single&nbsp;argument&nbsp;called&nbsp;done. Jest will wait until the done callback is called before finishing the test. 그러니까 아래처럼 고치면 되겠군요.
<pre id="code_1623968688015" data-ke-language="javascript" data-ke-type="codeblock"><code>// yes!!!
test('should ', done =&gt; {
 makeStr('darren', 10000, str =&gt; {
 try {
 expect(str).toBe('darren has 10000');
 done();
 } catch (error) {
 done(error);
 }
 });
});</code></pre>


<h4 data-ke-size="size20">Promise 테스트하기</h4>
Return a promise from your test, and Jest will wait for that promise to resolve. If the promise is rejected, the test will automatically fail.
Promise는 테스트 코드 내에 return 해주기만 하면 된다네요. resolve되면 pass, reject되면 fail됩니다.
<pre id="code_1623969203723" data-ke-language="javascript" data-ke-type="codeblock"><code>function asyncStr(name) {
 return new Promise(resolve =&gt; {
 setTimeout(() =&gt; {
 const str = `my name is ${name}`;
 resolve(str);
 }, 1500);
 });
}

test('async test', () =&gt; {
 return asyncStr('darren').then(res =&gt; {
 expect(res).toBe('my name is darren');
 });
});
</code></pre>

또 다른 방법으론 아래와 같이, resolves를 통해서 promise를 테스트할 수도 있습니다.&nbsp; 개인적으론 이것도 깔끔해서 좋아 보입니다.
다만 여기서도 반드시 return 해주어야 Promise를 제대로 테스트할 수 있습니다.
<pre id="code_1623970667911" data-ke-language="javascript" data-ke-type="codeblock"><code>test('async test', () =&gt; {
 return expect(asyncStr('darren')).resolves.toBe('my name is darren');
});
</code></pre>

만약, 고의적으로 reject를 내도록 코드를 짰다면 아래와 같이 짤 수 있습니다. error가 아니라 reject니까 toThrow가 아닌 toMatch를 썼습니다.
<pre id="code_1623970515325" data-ke-language="javascript" data-ke-type="codeblock"><code>function asyncStr(name) {
 return new Promise((resolve, reject) =&gt; {
 setTimeout(() =&gt; {
 reject('no');
 }, 1500);
 });
}

test('async test', () =&gt; {
 return asyncStr('darren').then(res =&gt; {
 expect(res).toBe('my name is darren');
 })
 .catch(error =&gt; expect(error).toMatch('no'));
});</code></pre>


<h4 data-ke-size="size20">async/await 를 이용하여 비동기 테스트하기</h4>

매우 직관적입니다.
<pre id="code_1623971505559" data-ke-language="javascript" data-ke-type="codeblock"><code>import 'regenerator-runtime/runtime';

function asyncStr(name) {
 return new Promise(resolve =&gt; {
 setTimeout(() =&gt; {
 const str = `my name is ${name}`;
 resolve(str);
 }, 1500);
 });
}

test('async test', async () =&gt; {
 const str = await asyncStr('darren');
 expect(str).toBe('my name is darren');
});
</code></pre>

아래와 같은 꼴로도 테스트할 수 있습니다.
<pre id="code_1623971803241" data-ke-language="javascript" data-ke-type="codeblock"><code>test('async test', async () =&gt; {
 await expect(asyncStr('darren')).resolves.toBe('my name is darren');
});</code></pre>


troubleshooting

* async/await를 이용한 비동기 테스트 도중 ReferenceError: regeneratorRuntime is not defined 에러가 난다?

폴리필 넣어줘야죠 뭐... 아, 근데 babel-pollyfill은 deprecated되었습니다.&nbsp;
regenerator-runtime/runtime을 삽입해주면 됩니다.
<pre id="code_1623971596905" data-ke-language="javascript" data-ke-type="codeblock"><code>yarn add regenerator-runtime --dev // 설치
import 'regenerator-runtime/runtime'; // 삽입</code></pre>
 
 
					
 
 
 </div></div>

HotHandCoding

DarrenKwon

https://jestjs.io/docs/asynchronous
 
비동기 테스트를 잘못 짜면 아래와 같은 경고 문구가 터미널에 출력됩니다.
 
Jest did not exit one second after the test run has completed.
This usually means that there are asynchronous operations that weren't stopped in your tests. Consider running Jest with `--detectOpenHandles` to troubleshoot this issue.
 
테스트는 끝났는데 jest가 exit하지 못했다는 거죠. 보통 이 경우에는 비동기가 제대로 실행되지 못하고 테스트가 마쳐졌음을 의미합니다. 쉽게 말하자면 "비동기 동작 테스트하려고 기다렸다가 반환되는 값을 보려고 하는데 왜 값을 확인하기도 전에 테스트가 끝나냐?"입니다.
 
그렇다면 어떻게 짜야하는 걸까요? 문서를 따라가봅시다.
 
 
콜백 테스트하기
 
기본적으로 jest는 함수가 실행되면, 끝나게 됩니다. 그러니까, 아래와 같은 코드에서 콜백은 실행조차 되지 않는 겁니다.
makeStr 함수가 실행되고, 콜백이 호출되기도 전에 테스트가 끝나는 겁니다.
function makeStr(name, money, cb) {
  setTimeout(() => {
    const str = `${name} has ${money}`;
    return cb(str);
  }, 500);
}
// wrong!!!
test('should ', () => {
  makeStr('darren', 10000, str => {
    expect(str).toBe('darren has 200'); // pass???
  });
});
 
Instead of putting the test in a function with an empty argument, use a single argument called done. Jest will wait until the done callback is called before finishing the test. 그러니까 아래처럼 고치면 되겠군요.
// yes!!!
test('should ', done => {
  makeStr('darren', 10000, str => {
    try {
      expect(str).toBe('darren has 10000');
      done();
    } catch (error) {
      done(error);
    }
  });
});
 
 
Promise 테스트하기
Return a promise from your test, and Jest will wait for that promise to resolve. If the promise is rejected, the test will automatically fail.
Promise는 테스트 코드 내에 return 해주기만 하면 된다네요. resolve되면 pass, reject되면 fail됩니다.
function asyncStr(name) {
  return new Promise(resolve => {
    setTimeout(() => {
      const str = `my name is ${name}`;
      resolve(str);
    }, 1500);
  });
}
test('async test', () => {
  return asyncStr('darren').then(res => {
    expect(res).toBe('my name is darren');
  });
});
 
또 다른 방법으론 아래와 같이, resolves를 통해서 promise를 테스트할 수도 있습니다.  개인적으론 이것도 깔끔해서 좋아 보입니다.
다만 여기서도 반드시 return 해주어야 Promise를 제대로 테스트할 수 있습니다.
test('async test', () => {
  return expect(asyncStr('darren')).resolves.toBe('my name is darren');
});
 
만약, 고의적으로 reject를 내도록 코드를 짰다면 아래와 같이 짤 수 있습니다. error가 아니라 reject니까 toThrow가 아닌 toMatch를 썼습니다.
function asyncStr(name) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject('no');
    }, 1500);
  });
}
test('async test', () => {
  return asyncStr('darren').then(res => {
      expect(res).toBe('my name is darren');
    })
    .catch(error => expect(error).toMatch('no'));
});
 
 
async/await 를 이용하여 비동기 테스트하기
 
매우 직관적입니다.
import 'regenerator-runtime/runtime';
function asyncStr(name) {
  return new Promise(resolve => {
    setTimeout(() => {
      const str = `my name is ${name}`;
      resolve(str);
    }, 1500);
  });
}
test('async test', async () => {
  const str = await asyncStr('darren');
  expect(str).toBe('my name is darren');
});
 
아래와 같은 꼴로도 테스트할 수 있습니다.
test('async test', async () => {
  await expect(asyncStr('darren')).resolves.toBe('my name is darren');
});
 
 
troubleshooting
 
* async/await를 이용한 비동기 테스트 도중 ReferenceError: regeneratorRuntime is not defined 에러가 난다?
 
폴리필 넣어줘야죠 뭐... 아, 근데 babel-pollyfill은 deprecated되었습니다. 
regenerator-runtime/runtime을 삽입해주면 됩니다.
yarn add regenerator-runtime --dev // 설치
import 'regenerator-runtime/runtime'; // 삽입

jest (3) : 비동기 코드 테스트하기

댓글