Cypress의 console.error에 대한 테스트 실패

이 게시물은 원래 my personal website 에서 실행되었습니다.

우리는 최근 내 직장에서 종단 간 테스트를 위해 Cypress으로 전환했습니다. 우리는 이전에 Mocha와 Puppeteer의 조합을 사용하여 테스트를 막 꺼버릴 정도로 불안정하게 만들었습니다. 이 플레이크는 완전히 사라졌고 모든 것은 우리의 모든 테스트를 이식하는 것이 비교적 쉬운 프로세스라고 생각했습니다. Cypress를 사용할 기회가 없다면 확인해 보는 것이 좋습니다.

테스트를 포팅하는 이 프로세스의 일부로 Cypress가 console.error 명령문에 대한 테스트에 실패하지 않았음을 깨달았습니다. 이에 대한 두 가지 쉬운 해결 방법이 있습니다. 1) cypress/support/index.js 파일에 약간의 논리를 추가하거나 2) cypress-fail-on-console-error 패키지를 추가합니다. 두 옵션 모두 완전히 유효합니다. 우리는 옵션 1이 우리에게 효과가 있었고 프로젝트에 다른 개발자 종속성을 추가할 필요가 없었기 때문에 결국 옵션 1을 선택했습니다.

방법 1 - commands.js 업데이트

첫 번째 방법은 cypress/support/index.js 에 다음 로직을 추가하는 것입니다. 이 솔루션은 Ryan Yost의 게시물Advanced Cypress Tips에서 수정되었습니다.

// /cypres/support/index.js
Cypress.on("window:before:load", win => {
  cy.stub(win.console, "error").callsFake(msg => {
    // log out to the terminal
    cy.now("task", "error", msg)
    // log to Command Log and fail the test
    throw new Error(msg)
  })
})

다음은 진행 중인 작업에 대한 안내입니다.

Cypress.on()을 사용하여 window:before:load 이벤트를 수신하여 앱의 코드가 실행되기 전에 window에 연결하고 수정합니다

.

원하는 로직이 실행되도록

console.error 메서드를 스텁 아웃하고 callsFake 연결합니다.

cy.now()는 Ryan Jost가 그의 blog post에서 논의한 약간의 해킹이지만 이를 통해 오류가 터미널에 로그아웃되도록 할 수 있습니다. cy.now()에 대한 자세한 정보는 here에서 찾을 수 있습니다.

마지막으로 console.error의 내용을 가로채서 적절한 오류로 throw합니다.

방법 2 - cypress-fail-on-console-error 패키지 사용

이 방법도 매우 간단하며 project repo.에서 읽을 수 있는 몇 가지 추가 구성 옵션이 있습니다.

패키지 설치

# npm
npm install cypress-fail-on-console-error --save-dev

# yarn
yarn add cypress-fail-on-console-error -D

그런 다음 cypress/support/index.js 를 약간 조정합니다.

// /cypress/support/index.js
import failOnConsoleError from "cypress-fail-on-console-error"

failOnConsoleError()

그게 다야!

질문이나 의견이 있으시면 아래로 연락주세요! 이 게시물이 도움이 되셨다면 리트윗이나 공유 부탁드립니다! 새 게시물을 발표할 때마다 sign up for updates 할 수도 있습니다.