async.spec.js 테스트 수정

소개

이 프로젝트에서는 vue-router-3.0.1 프로젝트 내의 async.spec.js 파일에서 발생하는 문제를 해결하는 방법을 배우게 됩니다. async.spec.js 파일에는 오류를 제대로 감지하지 못하는 테스트 케이스가 포함되어 있으며, 여러분의 과제는 테스트가 예상대로 통과하도록 코드를 수정하는 것입니다.

👀 미리보기

Message:
    Expected $.length = 3 to equal 5.
    Expected $[3] = undefined to equal 4.
    Expected $[4] = undefined to equal 5.

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다:

vue-router-3.0.1 프로젝트에서 async.spec.js 파일을 찾고 수정하는 방법
기존 테스트 케이스의 문제점을 이해하는 방법
테스트 케이스를 수정하기 위해 필요한 변경 사항을 구현하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

유닛 테스트에서 문제점을 식별하고 수정할 수 있습니다.
비동기 코드와 runQueue 유틸리티 함수를 사용할 수 있습니다.
테스트 케이스를 디버깅하고 문제 해결하는 기술을 적용할 수 있습니다.

시작하려면 편집기의 왼쪽 디렉토리에서 vue-router-3.0.1 폴더를 볼 수 있습니다.

이 단계에서는 vue-router-3.0.1 프로젝트의 async.spec.js 파일에서 문제를 해결하는 방법을 배우게 됩니다.

vue-router-3.0.1/test/unit/specs/async.spec.js 파일을 엽니다.
it("should work", (done) => { ... }) 블록을 찾습니다.
테스트를 더 쉽게 하기 위해 const queue = [1, 2, 3, 4, 5].map을 const queue = [1, 2, 3].map으로 변경합니다.

const queue = [1, 2, 3].map((i) => (next) => {
  // ...
});

터미널에서 vue-router-3.0.1 디렉토리를 엽니다.
npm install 명령을 실행하여 종속성을 설치합니다. 이 과정은 시간이 걸릴 수 있으니 잠시 기다려 주십시오. (오랫동안 멈춰 있으면 Ctrl+C를 눌러 프로세스를 종료한 다음 이 명령을 다시 실행하십시오.)
모든 종속성을 성공적으로 설치한 후, 터미널에서 npm run test:unit 명령을 실행하여 유닛 테스트를 실행합니다. 수정 전에는 위의 테스트 스크립트가 오류를 감지하지 못하는 것을 확인할 수 있습니다. (위 코드에서 calls의 값은 [1, 2, 3]이며, 이는 [1, 2, 3, 4, 5]와 같지 않습니다.)
위의 문제를 해결하기 위해 vue-router-3.0.1/test/unit/specs/async.spec.js 파일 내부를 다음 코드로 변경합니다:

const queue = [1, 2, 3].map((i) => (next) => {
  calls.push(i);
  setTimeout(next, 0);
});

여기서 변경 사항은 setTimeout(done, 0)을 setTimeout(next, 0)으로 변경하여 함수가 바로 빠져나가지 않도록 한 것입니다.

테스트 실행

이 단계에서는 vue-router-3.0.1 프로젝트를 다시 빌드하고 수정된 효과를 테스트합니다.

npm run test:unit 명령을 다시 실행하여 유닛 테스트를 실행합니다.
수정 후 다음 출력을 확인해야 합니다:

Message:
    Expected $.length = 3 to equal 5.
    Expected $[3] = undefined to equal 4.
    Expected $[4] = undefined to equal 5.

이는 async.spec.js 테스트가 성공적으로 수정되었음을 나타냅니다.

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.