E2E 테스트 - 테스트 환경 구성

 

E2E 테스트 - 테스트 환경 구성

 

1. npm i -D cypress eslint-plugin-cypress 설치

 

2. package.json 수정

{
  ...
  "scripts": {
    ...
    "test:e2e": "cypress open"
  },
  ...
}

 

3. .eslintrc.js 수정

module.exports = {
  env: {
    ...
    'cypress/globals': true
  },
  plugins: [
    'cypress'
  ],
  ...
}

 

첫 테스트

 

1. /cypress/integration/first.test.js 생성

describe('첫 번째 테스트', () => {
  // E2E(cypress) 테스트 it() = 단위 테스트 test()
  it('프로젝트 페이지 이동', () => {
    // E2E(cypress) 전역 객체 cy = 단위 테스트 전역 객체 jest
    cy.visit('http://localhost:8080')
  })
})

 

2. npm run dev 로 개발 서버 오픈

 

3. 새로운 터미널을 열어서 npm run test:e2e 실행

 

결과

 

구성 옵션 추가

 

1. /cypress.json 수정

- 테스트 코드 cy.visit('/') 작성 시 baseUrl 링크로 이동

- viewportWidth 뷰포트 가로 사이즈

- viewportHeight 뷰포트 세로 사이즈

{
  "baseUrl": "http://localhost:8080",
  "viewportWidth": 1400,
  "viewportHeight": 800
}

 

---

 

참고

https://www.cypress.io/

JavaScript End to End Testing Framework