12. 프론트엔드 테스트 1 - 컴포넌트 테스트

프론트엔드 테스트의 필요성

1. 버그 감지

2. 코드 품질 향상

3. 리팩토링 안정성 보장

4. 기능 검증

5. 사용자 신뢰 제공

6. 자동화와 통합

테스트 종류

• 유닛 테스트 - 블록과 코드 단위의 개별 테스트. 리액트에서는 함수나 훅 또는 컴포넌트 단위
• 컴포넌트 테스트 - 리액트 컴포넌트에 더 초점을 맞춘 테스트. 랜더링, 상호작용 및 동작을 테스트 함.
• 통합 테스트 - 여러 요소에 대한 테스트. 함수와 훅, 컴포넌트를 함께 테스트 함.

• E2E 테스트 - 사용자 시나리오를 실제 브라우저 환경에서 테스트 함.

• 스냅샷 테스트 - 랜더링 출력을 저장하여 테스트 시 컴포넌트의 랜더링 출력과 비교함.

Next.js 테스트 라이브러리

• Vitest (유닛 테스트)

• Jest (유닛 테스트, 스냅샷 테스트)

• Playwright (E2E 테스트)

• Cypress (E2E 테스트, 컴포넌트 테스트)

Testing: Cypress

Learn how to set up Cypress with Next.js for End-to-End (E2E) and Component Testing.

https://nextjs.org/docs/app/building-your-application/testing/cypress

Cypress 컴포넌트 테스트

1. 색상 (기본, 다크, 라이트)

1. 반응

1. 비활성화

1. 로딩

1. 크기 Large, Medium, Small (이미지 상으로는 실제와 크기가 약간 상이함)

테스트 코드 작성하기

1. 색상 옵션에 따른 변화

2. 버튼 클릭시 변화

3. 비활성화 옵션에 따른 변화

4. 로딩상태 옵션에 따른 변화

5. 크기 옵션에 따른 변화

describe('BoxButton Component', () => {
  it('renders correctly with different sizes', () => {
    mount(
      <BoxButton buttonType='rect' size='l' theme='default'>
        Large Button
      </BoxButton>,
    )
    cy.get('button').should('contain', 'Large Button').and('have.class', 'py-[16px]')

    mount(
      <BoxButton buttonType='rect' size='m' theme='default'>
        Medium Button
      </BoxButton>,
    )
    cy.get('button').should('contain', 'Medium Button').and('have.class', 'py-[14px]')

    mount(
      <BoxButton buttonType='rect' size='s' theme='default'>
        Small Button
      </BoxButton>,
    )
    cy.get('button').should('contain', 'Small Button').and('have.class', 'py-[8px]')
  })
})

컴포넌트 테스트 후기