서버를 시작하기 전에 Cypress 대기

공식 문서에 같은 기술이 있으니 이 글을 보지 말고 저쪽을 참조하세요.
이 방법으로도 잘 안되면 속편😔
서버가 시작되면 프런트엔드 테스트를 수행하려면 bahmutov/start-server-and-test를 사용합니다.
나는... 을 쓰고 싶다.문장의 나머지 부분은 배경 설명과 간단한 설정 방법에 대한 소개이기 때문에 급한 사람은 읽을 필요가 없다.우선, 상기 start-server-and-test 가져오기

$ npm install --save-dev start-server-and-test

이렇게 사용합니다.

$ npx start-server-and-test 'http-server -c-1 .' http://localhost:3333 'cypress run'

단, 웹 팩-dev-server를 사용하는 경우 http-get://로 URL을 지정합니다(후술).

배경 - 불안정한 E2E 테스트

전면 E2E 테스트cypress가 사용됩니다.테스트는 CircleCI에서 진행됐지만 최근에는 E2E만 빈번하게 실패했다.아무리 실행해도 성공하지 못할 것이다.이른바'불안정 테스트(Flaky Tests)'[1]로, 개발자를 불안하게 하는 볼썽사나운 녀석이다.

원인을 규명하다

일단 보류했지만 인내의 한계에 도달해 조사를 하기로 했다.E2E 테스트는 다음과 같이 CircleaCI 워크플로우로 수행됩니다.

서버를 시작하기 위한 단계background 백그라운드

옵션

이후 단계에서 수행cypress run

추적에 실패했을 때의 기록을 추적해 보십시오. 1의 서버는 자바스크립트 코드의 연결과 묶음으로 시작하는 데 시간이 걸렸습니다. 2의 서버 연결 확인은 시간이 초과된 것 같습니다.

Opening Cypress...
Cypress could not verify that this server is running:

  > http://localhost:8080

We are verifying this server because it has been configured as your `baseUrl`.

Cypress automatically waits until your server is accessible before running tests.

We will try connecting to it 3 more times...
We will try connecting to it 2 more times...
We will try connecting to it 1 more time...

Cypress failed to verify that your server is running.

Please start this server and then run Cypress again.

세 번 다시 시도했지만 부족한 것 같아요.

시작 시 재시도 횟수가 증가하지 않습니다...

당초'접속 확인을 위한 재시도 횟수를 늘리면 되겠지'라고 생각했지만, 아쉽게도 안 될 것 같다[2]실패한 테스트 재시도.
그래서 그 아이슈에도 소개된 bahmutov/start-server-and-test를 입어보기로 했어요.이 npm 모듈 사용하기

서버가 시작되고 지정된 엔드포인트에 연결될 때까지 대기

접속 확인 후 테스트 수행

(따라서 호출 서버와cypress를 실행하는 절차를 한데 모은다).

start-server-and-test 설정

도입은 npm부터 시작한다.개발 때만 사용하기 때문에 devDependencies로 추가되었습니다.

$ npm install --save-dev start-server-and-test

이 증가하면 start-server-and-test라는 명령을 사용할 수 있다.이 지령의 기본적인 사용 방법은 이렇다.

$ start-server-and-test <SERVER-COMMAND> <URL or PORT> <TEST-COMMAND>

README에서 npm script를 사용하는 방법을 먼저 소개한다.

{
    "scripts": {
        "start-server": "npm start",
        "test": "mocha e2e-spec.js",
        "ci": "start-server-and-test start-server http://localhost:8080 test"
    }
}

도 당연히 npx로 시작할 수 있는데 이런 상황에서 <SERVER-COMMAND>와TEST-COMMAND의 npx를 생략할 수 있다.

$ npx start-server-and-test start 8080 test

단, 서버에서 웹팩-dev-server를 사용하는 경우 주의해야 합니다.start-server-and-test는 기본값HEAD에 따라 확인하지만 웹 패키지-dev-server는 지원하지 않습니다HEAD.이 문제를 방지하려면 http-get://로 시작하는 URL을 사용하여 두 번째 매개변수를 지정합니다.

$ npx start-server-and-test start http-get://localhost:8080/ test

또한README 시간 초과 설정과 여러 서버를 시작하는 방법도 기재되어 있으니 어려움이 있으면 참고하시기 바랍니다.
각주
Google Testing Blog: Flaky Tests at Google and How We Mitigate Them ↩︎
Feature request: Add the ability to configure the server wait behavior · Issue #8870 · cypress-io/cypress ↩︎