[Yarn berry] pnp가 Cypress환경에서 제대로 동작하지 않던 이슈 해결

 

 

디펜던시 문제를 잘 해결하고 build와 run까지 문제없이 잘 돼서 이제 끝났나 싶었더니, 테스트 CI에서 뻥뻥 터지는 것을 발견했다.
Cypress 환경에서 pnp를 사용하는 것에 대해 겪은 두가지 문제가 있었는데, 이에 대한 원인과 해결한 내용을 정리해 보려고 한다.

 

cypress.config.ts 파일을 읽는데 .ts 확장자를 읽지 못하는 문제.

 

우선 pnp는 CommonJS를 Base로 동작하도록 되어 있고, 추가로 ESM 모듈 지원이 필요하다고 판단되면 추가 세팅이 되는 방식이다.

그래서 pnp install을 하면 루트 경로에 pnp.cjs(commonJS) 파일을 생기는데, 프로젝트 자체가 ESM 모듈 지원이 필요하다고 판단되면 pnp.loader.mjs 파일을 추가로 생성하도록 되어있다.

 

그러나 cypress 환경을 구축한 내용들이 CommonJS가 아니기 때문에, pnp.loader.mjs를 거쳐 실행이 되어야 하는데, 이상하게 esm 형식으로 로더가 되지 않아서 그런지 commonJS 환경에 대한 요구를 함으로써 ts 파일을 읽지 못하는 문제가 발생하는 것이다.

 

cjs로더로 동작하도록 하기 위해 기존에 cypress.config.ts 파일을 cypress.config.js 파일로 변환 후 실행하니 Cypress 자체 실행은 정상적으로 되는 것을 확인할 수 있었다.

Cypress에서 pnp 모듈을 로드하지 못하는 문제

BDD 테스트 코드를 위해 우리는 Cucumber를 사용하고 있는데, Cypress 테스트 코드 단에서 Cucumber를 찾지 못하는 문제가 있었다. 

Cucumber와 pnp 호환에 문제가 있나 싶었더니, Cucumber 뿐 아니라 다른 모듈들도 찾지 못하는 것을 확인할 수 있었고, Cypress 환경 자체에서 pnp 모듈을 제대로 불러오지 못하는 것을 알 수 있었다.

 

정확하게는 어떤 이유인지는 모르겠으나, Cypress run을 할 때 프로젝트 자체 환경의 yarn 환경과 다른 컨텍스트를 가지고 실행이 돼서, pnp.cjs 모듈을 인식하지 못하는 문제가 있는 듯하다.

Cypress and Yarn 2 PNP support · Issue #8008 · cypress-io/cypress

 

그래서 Cypress에서 빌드할 때 pnp 모듈을 직접 지정해주면 되지 않을까 해서 찾아봤더니, 아니나 다를까 pnp 관련 Bundle Plugin이 있는 것을 알 수 있었다.

Webpack 전용 Plugin

GitHub - arcanis/pnp-webpack-plugin: Transparently adds support for Plug'n'Play to Webpack

 

Esbuild 전용 Plugin

GitHub - yarnpkg/berry: 📦🐈 Active development trunk for Yarn ⚒

@yarnpkg/esbuild-plugin-pnp 라는 모듈이 있지만, 0.15 이상부터는 esbuild 내장 지원.

확인해보니 우리는 esbuild 0.14 버전을 쓰고 있었고, 0.15로 업데이트를 해주니 정상적으로 돌아가는 것을 확인할 수 있었다.