테스트는 에러를 예상하고 의도하지 않은 동작을 방지하여 사용자 경험을 향상시키며, 코드의 안정성을 유지하기 위해 필요함
CI/CD 환경에서 자동화된 테스트 스크립트를 실행하여 코드 변경 사항이 통합되고 배포되기 전에 안정성을 검증
테스트의 종류
유닛 테스트Unit Test
코드의 개별 컴포넌트나 함수를 테스트하는 것
주로 모듈, 함수 혹은 컴포넌트 단위로 진행하며, 해당 단위가 의도한대로 동작하는지 검증
통합테스트Integration Test
여러 개의 유닛이나 컴포넌트를 함께 테스트하여 이들 간의 상호작용과 통합이 올바르게 이뤄지는지 확인. 시스템 전체의 안정성을 보장하는 데 기여.
E2E 테스트(End-to-End Test)
사용자 시나리오를 흉내내어 전체 애플리케이션의 동작을 테스트
실제 사용자가 마주할 상황을 최대한 모방하여 테스트하므로, 애플리케이션의 품질과 사용자 경험을 평가하는데 유용
스냅샷 테스트
UI 컴포넌트의 렌더링 결과를 스냅샷으로 캡처하고, 변경 사항이 있는지 확인
UI 변경을 쉽게 감지하고 예상하지 못한 레이아웃 변화를 방지함
회귀 테스트Regression Test
새로운 코드 변경이나 기능 추가 후에 시스템이 여전히 예전에 작동하던 기능들을 망가뜨리지 않았는지 확인하는 테스트
변경 사항이나 새로운 기능 추가로 인해 발생할 수 있는 예기치 못한 부작용을 방지하기 위해 필요
성능 테스트Performance Test
시스템의 성능과 안정성을 확인하는데 중점
부하 테스트, 성능 테스트, 신뢰성 테스트 등
대량의 데이터나 동시 사용자가 많은 상황에서 시스템이 어떻게 동작하는지를 평가
안정성 테스트Security Test
시스템의 보안에 중점을 둔 테스트, 잠재적인 보안 취약점을 찾고 해결함으로써 시스템을 보호
SQL 인젝션, 크로스 사이트 스크립팅(XSS), 크로스 사이트 요청 위조(CSRF) 등을 확인하는데 사용
사용성 테스트Usability Test
사용자가 제품을 쉽게 이해하고 조작할 수 있는지를 평가
인터페이스, 플로우, 접근성 등을 고려하여 사용자 경험을 향상시키는데 도움
A/B 테스트
두 가지 또는 그 이상의 변형을 사용하여 어떤 버전이 사용자에게 더 효과적인지를 비교하는 테스트
주로 마케팅 캠페인이나 사용자 경험 개선을 위해 사용됨
테스트 도구
Jest
Facebook에서 만든 JavaScript 테스트 프레임워크
주로 유닛 테스트에 사용
Snapshot 테스트, 비동기 코드 테스트, mock를 지원하여 간편하게 사용 가능
Cypress
E2E 테스트에 특화된 도구
실제 브라우저에서 애플리케이션을 실행하며 테스트
사용자 인터랙션을 테스트하고 디버깅하는 데 용이하며, 가독성 좋은 테스트 코드를 작성 가능
Storybook
UI 컴포넌트의 렌더링 결과를 보여줌
Testing Library
React,Angular, Vue 등 다양한 프레임워크에 대한 테스트 도구를 제공하는 생태계
사용자 중심의 테스트 방법론을 채택하여 실제 사용자의 관점에서 테스트를 수행
TDD, Test-Driven Development
개발자가 코드를 작성하기 전에 테스트를 먼저 작성하는 방법론
코드의 요구 사항을 명확히 이해하고, 안정성 있는 코드를 유지할 수 있음
- 구현하려는 동작을 설명하는 테스트 코드 작성
- 테스트 실행, 아직 코드를 작성하지 않았으므로 실패함
- 테스트를 통과하기 위한 코드를 작성
- 테스트 실행하여 코드를 확인
- 테스트를 통과하면 코드를 리팩터링
- 테스트를 먼저 작성함으로써, 개발자는 구현하려는 동작에 대해 먼저 생각하게 되어 특정한 요구사항에 맞는 코드를 작성할 수 있음
- 코드의 유지보수성을 향상시키고, 시간이 지나도 프로젝트의 유지 관리가 쉬워짐
- 코드 수정 시 미처 생각지 못한 부분에 대한 문제점을 미리 파악 가능
- 애플리케이션엥 대한 신뢰성이 높아짐
- 테스트 코드는 동작 방식을 설명하니, 테스트 파일 자체를 문서로 활용 가능
그냥 사용만 해보기
cypress
const { defineConfig } = require('cypress');
module.exports = defineConfig({
screenshotOnRunFailure: false,
video: false,
blockHosts: ['cdn.jsdelivr.net'],
e2e: {
setupNodeEvents(on, config) {},
specPattern: 'test/*.spec.js',
supportFile: false,
},
});describe("카드 컴포넌트 테스트", () => {
it("카드 컴포넌트가 렌더링된다.", () => {
cy.visit("http://localhost:3000");
cy.get(".card").should("be.visible");
});
it("게임이 다시 렌더링된다.", () => {
cy.visit("http://localhost:3000");
cy.contains("button", "카드입니다").click();
cy.contains("button", "다시 하기").click();
cy.get(".card").should("be.visible");
});
});jest
const { Card, Cards } = require("../src/index");
describe("Card", () => {
test("카드 결과보기 테스트", () => {
const resetGameMock = jest.fn();
const card = new Card(true, 0, resetGameMock, null);
card.selectCard();
expect(resetGameMock).toHaveBeenCalledTimes(1);
});
});
describe("Cards", () => {
test("카드 생성하고 리셋하기 테스트", () => {
const createCardsMock = jest.spyOn(Cards.prototype, "createCards");
const renderCardsMock = jest.spyOn(Cards.prototype, "renderCards");
const cards = new Cards(5);
cards.resetGame();
expect(createCardsMock).toHaveBeenCalledTimes(1);
expect(renderCardsMock).toHaveBeenCalledTimes(1);
});
});jest는 jsdom 라이브러리를 따로 또 설치한다는 점에서 그냥 cypress가 e2e테스트 무난한듯,, 사실 아직 어디서 테스트를 해야하는지 감이 잘 안잡히다보니 그냥 이런 도구가 있군,,하고 지나가게 된다.
