[Cypress] React 프로젝트에 cypress 설치 및 문서화

React 프로젝트 cypress와 연동하기

---

cypress 설치

npm install cypress --save-dev

 

 

package.json 변경

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "cypress:open": "cypress open"
  }

 

cypress 실행

npm run cypress:open

 

테스트 코드 작성 후 결과

 

 

Cypress 문서화 (cypress-mochawesome-reporter) 

npm i --save-dev cypress-mochawesome-reporter

 

 

cypress.config.js 수정

const { defineConfig } = require("cypress");
module.exports = defineConfig({
  reporter: 'cypress-mochawesome-reporter',
  reporterOptions: {
    charts: true,
    reportPageTitle: 'custom-title',
    embeddedScreenshots: true,
    inlineAssets: true,
    saveAllAttempts: false,
  },
  viewportWidth: 1920,
  viewportHeight: 1080,
  e2e: {
    setupNodeEvents(on, config) {
      require('cypress-mochawesome-reporter/plugin')(on);
      // implement node event listeners here
    },
    baseUrl: 'http://localhost:3000'
  },
});

 

cypress 테스트 실행

npx cypress run

 

결과