02.E2E - end to end

---

1.cypress 설치 및 환경 구성

• 완성된 project 를 전체적으로 test 할때, 가장 자주 쓰이는 JS emd to end testing framework 인 cypress 를 사용하겠습니다.

VTU docs

• 설치 : $ npm install cypress eslint-plugin-cypress

• eslint 에서 문법 error 가 발생하지 않도록 eslint-plugin-cypress 도 같이 설치 합니다.

• package.json 에서 script 를 추가 합니다

// in package.json

• 만약 Linux 환경이라면 추가로 dependencies 를 추가해야 해서 설치 해야 합니다. (Ubuuntu 기준)

$ sudo apt-get install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb

• E2E test 는 unit test 와 다르게 로직을 검사하는 것이 아니고, 실제 화면이 사용자가 원하는 시나리오 대로 정상적으로 동작하는지 체크하는데 진행하는 test 입니다.

• 🔶 eslint 문법 적용에서 제외 하기 위한 eslint-plugin-cypress 의 사용을 위해서 .eslintrc.js 에서 다음과 같이 설정해 줍니다.

module.exports = {
  // 사전에 정의된 전역 변수 설정
  env: {
    'cypress/globals': true
  },
  plugins: [
    'cypress'
  ]

🔶 🔷 📌 🔑

Reference

• [Cypress - https://docs.cypress.io/guides/overview/why-cypress