[Test Code] cypress cloud / aws amplify에서 테스트 진행하기

Cypress cloud 환경 설정

첫 번째 테스트 자동화 도구는 cypress cloud다.

cypress에서 무료로 제공하는 클라우드로, 테스트가 돌아가면 각 테스트에 대해 대시 보드를 볼 수 있다.

또한 에러나 스펙에 대해서도 확인할 수 있고, pr이나 push가 발생했을 때 자동으로 테스트를 실행할 수도 있다.

이것을 실행하기 위해 먼저 환경 설정을 해보자.

 

Testing Frameworks for Javascript | Write, Run, Debug | Cypress

 

우측 상단에 로그인을 한다.

cypress에서 물어보는 것에 적당히 선택해서 답해주면 6자리 랜덤 프로젝트 아이디를 준다.

이것을 cypress.config.js에 적어 넣어준다.

// cypress.config.ts

import { defineConfig } from 'cypress';

export default defineConfig({
  projectId: ''  // 여기!
  e2e: {
    baseUrl: 'http://localhost:5173',
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
});

 

다음에 Github Actions 클릭해서 연동해주고 하라는 대로 하면 된다.

연동하는 과정에서 필요한 스텝들이 잘 적혀 있어서 그대로 따라하면 된다.

 

 

 

기존에 작성한 테스트들이 잘 통과되었다는 게 터미널에 뜬다.

 

 

cypress cloud에서도 쉽게 확인할 수 있다.

한글이 보이니 상당히 반가운 마음...

 

이후에 .github/workflows를 생성하고 cypress.yml까지 적어주면 100%로 온보딩 과정이 완성된다.

필자는 강의 레포지토리를 클론해서 브랜치에 작업했더니 pr이 안되는 이슈가 있어서 그 과정까지 담진 못했다.

하지만 대충 어떤 식으로 하면 테스트 - pr/push로 확인 - 수정 과 같은 사이클을 적용할 수 있는지는 확인할 수 있었다.

 

AWS Amplify

AWS console 로그인 -> AWS Amplify -> region: [ap-northeast-2] -> React get started -> Github -> continue

위 스텝으로 하고 사용할 레포지토리에 권한을 준다.

 

마우스 있는 곳 위를 보면 baseDirectory: dist라고 되어 있다.

build하고 경로가 dist가 아니라면 수정해줘야 한다.

밑에 Advanced settings를 통해 환경 변수도 넣어줄 수 있다.

넣고 save and deploy를 눌러주면 끝!

(frontend 코드는 월에 1000시간인가 무료라고 한다!)

 

 도메인을 routes 53에서 구매했다면 위에 바로 뜨고, 그게 아니라 다른 사설 호스팅 업체에서 구매했다면 Cname만 연결해주면 된다.

 

공식문서 따라하면 에러나는 AWS Amplify + cypress

말 그대로 공식문서를 따라하면 에러가 난다. 

작성일만 봐도 2019 oct인데 업데이트가 안된 걸까 이슈도 엄청 많이 적혀 있다.

따라서 공식문서가 아닌 강의를 따라서 테스트를 적용해보겠다.

 

이번에 필요한 패키지는 start-server-and-test 라는 패키지다.

start-server-and-test

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

// package.json

{
    "scripts": {
        "start-server": "npm start",
        "test": "cypress run",
        "ci": "start-server-and-test start-server http://localhost:5173 test"
    }
}

 

amplify.yml을 수정한다.

AWS amplify에서 수정하는 게 더 편리하다.

 

17번째 줄부터 24번째 줄까지 아래와 같이 바꿔준다. 이후에 redeploy를 진행해준다.

test:
	phase:
    	pretest:
        	commands:
            	- npm ci
        test:
        	commands:
            	- npm run ci

 

provision부터 build, test, deploy가 순차적으로 진행된다.

로컬 터미널에서 확인했던 거랑 똑같이 잘 끝나면 성공!

 

---

참고 강의

2시간으로 끝내는 프론트엔드 테스트 기본기 강의 | 강병진 - 인프런