나만보는개발공부블로그

[Cypress] window.__coverage__ is undefined 본문

Web Development/Front

[Cypress] window.__coverage__ is undefined

alexrider94 2022. 6. 24. 19:33

Cypress 공식 홈페이지의 test coverage 가이드 라인을 참고하며 따라해도 window.__coverage__가 undefined로 뜨는 현상이 있었다.
그리고 Cypress e2e 테스트를 실행하고 맨 아래에 아래와 같은 경고가 떳다.

에러 내용

⚠️ file xxx/.nyc_output/out.json has no coverage information
Did you forget to instrument your web application? Read https://github.com/cypress-io/code-coverage#instrument-your-application


위의 url을 찾아 들어가보면 instanbul의 babel plugin에 들어가야 한다고 한다.

//.babelrc

{
  "plugins": ["istanbul"]
}

그래서 babel-plugin-istanbul을 설치해서 위의 내용과 같이 작성하였는데도 여전히 뜨지 않았다.

//babel.config.js

const shouldInstrumentCode = "INSTRUMENT_CODE" in process.env;
console.log("shouldInstrumentCode", shouldInstrumentCode);

module.exports = {
  presets: ["next/babel"],
  plugins: shouldInstrumentCode
    ? ["istanbul"]
    : [],
};

console.dir(module.exports, { depth: null });

그래서 정말로 istanbul이 작동하는지 console로 확인하였다.
여러가지의 검색 결과를 통해서 문제를 해결할 수 있엇는데 다음과 같이 해결하였다.

해결방안

istanbul babel plugin option으로 include가 존재하는데 이부분에 필요한 테스트 커버리지 소스들을 포함시키니 window.__coverage__에 내용이 나타났다.

["istanbul",
	{
		include: ["src/**/*.{ts,tsx,js}", "pages/**/*.{ts,tsx,js}"]
	}
],