[테스트 자동화] Cypress 기본

Cypress란?

- 웹이 정상적으로 동작하는지 자동으로 테스트하기 위한 프론테엔드 테스트 도구이다.

- JS 기반으로 테스트 코드를 작성할 수 있다.

- TDD(Test Driven Development - 테스트 주도 개발)를 위해 사용된다.

 

TDD란?

- 테스트 주도 개발을 의미한다.
- 구현 기능에 대한 테스트 시나리오 및 코드를 먼저 만들고, 이후에 테스트를 만족하도록 하는 기능을 구현하는 개발 방식이다.

- 단기적으로는 코딩 시간이 오래걸릴 수 있지만, 장기적으로는 코드 복잡도와 버그를 줄여주는 효과를 보여준다.

 

1. react 프로젝트 생성

npx create-react-app cy-macro --template typescript

 

2. cypress 및 react관련 cypress 모듈 설치

- @cypress/react : cypress의 react adaptor

cd cy-macro

npm install cypress @cypress/react @cypress/webpack-dev-server --dev

 

3. root 폴더 내 cypress.json  파일 생성

{
  "component": {
    "testFiles": "**/*.test.{js,ts,jsx,tsx}",
    "componentFolder": "src"
  }
}

4. root 폴더 내 cypress/plugins/index.js 파일 생성

const injectDevServer = require("@cypress/react/plugins/react-scripts")

module.exports = (on, config) => {
  injectDevServer(on, config)
  return config
}

5. src/App.test.tsx 파일 수정을 통해 테스트 코드 작성

import React from 'react';
import App from './App';
import { mount } from '@cypress/react';

it('renders learn react link', () => {
  mount(<App />);
  cy.get('a').contains('Learn React');
})

/* Cypress 사용법 */
// 대부분의 테스트는 @cypress/react의 mount로 시작된다.
// Testing Library의 render에 비슷하다.

/* React 기본 Test Library */
// import { render, screen } from '@testing-library/react';
// test('renders learn react link', () => {
//   render(<App />);
//   const linkElement = screen.getByText(/learn react/i);
//   expect(linkElement).toBeInTheDocument();
// });

 

출처

- cypress 레퍼런스
https://docs.cypress.io/guides/references/assertions.html
- cypress 치트시트
https://cheatography.com/aiqbal/cheat-sheets/cypress-io/

https://www.cypress.io/blog/2021/04/06/cypress-component-testing-react/

https://github.com/lmiller1990/cypress-react-template