[오류해결] VSCode - Cannot find name 'test'. Do you need to install type definitions for a test runner?
오류 발생
VSCode에서 Typescript로 작성된 테스트코드에 붉은 밑줄이 그어지며 오류 메시지가 나타났다.
참고로 yarn test 같은 테스트 실행 명령어로 동작은 잘 되는 상태였다.
오류 상세
Cannot find name 'test'. Do you need to install type definitions for a test runner? Try `npm i --save-dev @types/jest` or `npm i --save-dev @types/mocha`.ts(2582)원인 분석
VSCode에서 Jest의 타입을 불러오지 못해서 발생한 오류였다.
해결 방법
해결방법은 tsconfig.json 파일에 아래와 같이 "@types/jest"를 추가한다.
물론 tsconfig.json에 "exclude": ["**/tests/*.test.ts"] 처럼 exclude옵션에서 테스트코드의 확장자를 제외시키는 방법도 있다.
하지만 보다 근본적인 해결방법은 오류 메시지처럼 type definition을 인식가능하도록 만들어주는 것이다.
{
"compilerOptions": {
...,
"types": ["...", "@types/jest"],
....
},
}npm, yarn classic(V1)을 사용한다면 위와 같이 tsconfig.json을 수정하는 것으로 오류가 해결된다.
그런데 만약 Yarn berry(V2+)를 사용하고 있고 오류가 계속 발생한다면 추가로 익스텐션 설치와 VSCode 설정을 해줘야 한다.
Yarn berry는 Plug’n’Play(PnP)방식을 사용하기 때문에 node_modules 디렉터리에서 의존성을 관리하지 않는다..yarn 디렉터리 아래에 압축된 zip파일로 의존성 관리를 하기 때문에 이 경로를 인식할 수 있도록 추가적인 설정이 필요하다.
다음은 VSCode에서 Yarn Berry와 호환이 되는 개발환경을 구성하는 방법이다.
Yarn Berry에 필요한 익스텐션과 VSCode 설정
VSCode에서 @types를 제대로 불러오려면 ZipFS, @yarnpkg/sdks를 설치해야 한다.
1. ZipFS - a zip file system
Yarn berry는 zip파일로 의존성을 관리하기 때문에 필요하다.
ZipFS는 VSCode가 zip파일을 읽기 가능하게 만드는 확장 프로그램이며 Yarn의 메인테이너인 Maël Nison이 작성했다.
Extensions에서 ZipFS를 검색해서 추가한다.
2. @yarnpkg/sdks 설치
아래 명령어를 실행하면 vscode 설정값들이 자동으로 생성된다.
yarn dlx @yarnpkg/sdks vscode실행이 끝나면 프로젝트 루트에 .vscode디렉터리가 만들어지고 아래와 같이 extensions.json, settings.json파일이 생성된다.
// extensions.json
{
"recommendations": [
"arcanis.vscode-zipfs",
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode"
]
}// settings.json
{
"search.exclude": {
"**/.yarn": true,
"**/.pnp.*": true
},
"eslint.nodePath": ".yarn/sdks",
"prettier.prettierPath": ".yarn/sdks/prettier/index.cjs",
"typescript.tsdk": ".yarn/sdks/typescript/lib",
"typescript.enablePromptUseWorkspaceTsdk": true
}3. VSCode 재시작
설치가 완료되고 나서도 오류가 해결되지 않았다면 VSCode를 재시작한다.