![width:300px height:300px bg right](https://media4.giphy.com/media/Qwu92Yv0xQQDTEAeyx/giphy.webp?cid=d8f9e3b8pv4d2g0kvizifpd5oohik9kcmo38vayjhfmtqsyk&ep=v1_stickers_search&rid=giphy.webp&ct=s) # 프론트엔드 테스팅 ## [소플 (이인제)](https://www.soaple.io/) --- # 목차 - [테스팅 개요](#테스팅-개요) - [Jest](#jest) - [Testing Library](#testing-library) - [Cypress](#cypress) - [Playwright](#playwright) --- ![width:300px height:300px bg right](https://media4.giphy.com/media/Qwu92Yv0xQQDTEAeyx/giphy.webp?cid=d8f9e3b8pv4d2g0kvizifpd5oohik9kcmo38vayjhfmtqsyk&ep=v1_stickers_search&rid=giphy.webp&ct=s) # 테스팅 개요 --- # 테스팅이란? - 소프트웨어의 정확성, 완전성, 보안성을 검증하는 과정 - 버그나 오류, 문제점을 찾아내어 수정하기 위한 목적 - 소프트웨어 개발 과정의 중요한 부분으로, 품질 향상에 크게 기여 - 다양한 테스팅 방법론과 도구가 있으며, 상황에 따라 적절한 테스팅 방법을 선택하여 사용 --- # 단위 테스트 (Unit Test) - 소프트웨어의 가장 작은 단위를 테스트하는 방법 - 이는 개별 함수, 메소드, 클래스, 모듈 등을 대상으로 함 - 단위 테스트의 목적은 개별 컴포넌트가 예상대로 작동하는지 확인하는 것 - 이를 통해 버그를 빠르게 찾아 수정할 수 있음 - 단위 테스트는 코드의 품질을 향상시키고, 리팩토링을 안전하게 수행할 수 있게 도와줌 --- # JavaScript의 대표적인 단위 테스트 라이브러리 * Jest (https://jestjs.io/) * Mocha (https://mochajs.org/) --- # 통합 테스트 (Integration Testing) - 소프트웨어의 개별 모듈이나 구성 요소가 결합되어 전체 시스템에서 올바르게 상호작용하는지 검증하는 테스트 - 모듈 간의 인터페이스나 데이터 흐름이 예상대로 작동하는지를 확인하는 것이 목표 - 통합 테스트 적용 예시 - 데이터 흐름 및 통신 검증 - API 및 서비스 통합 확인 - 종단 간 시나리오 테스트 - 성능 및 로드 테스트 - 사용자 경험(UX) 검증 --- # 통합 테스트의 장단점 - 장점 - 모듈 간 인터페이스 검증 가능 - 실제 사용 시나리오 검증 가능 - 단점 - 높은 테스트 설정 복잡도 - 느린 테스트 속도 --- # End-to-End 테스트 (E2E 테스트) - 통합 테스트의 일종 - 실제 브라우저에서 기능들이 정상적으로 작동하는지 테스트 하는 것 - 사용자의 시나리오에 기반한 테스트 - 버그 발견율이 높기 때문에 개발 초기부터 적용하는 것이 좋음 - 화면이 자주 변경될 경우 테스트 코드 작성에 시간이 많이 소요되므로 고려 필요 --- # 대표적인 E2E 테스트 도구 - [Cypress](https://www.cypress.io/) - 소개 동영상: https://www.cypress.io/videos/home_page.webm - [Playwright](https://playwright.dev/) - Microsoft에서 개발한 오픈소스 테스팅 및 자동화 프레임워크 --- ![width:360px bg right](https://miro.medium.com/v2/resize:fit:600/1*i37IyHf6vnhqWIA9osxU3w.png) # Jest --- # Jest - Meta(구 Facebook)에서 개발한 JavaScript 테스팅 프레임워크 - 단위 테스트, 통합 테스트 지원 - 스냅샷 테스트, 모의 함수 및 스파이 기능 제공 - 코드 커버리지 리포트 제공 - 간편한 설정 및 사용 - 다양한 플러그인 지원 --- # Jest 단위 테스트 예시 (1/2) #### 함수 정의 (`sum.js`) ```js function sum(a, b) { return a + b; } module.exports = sum; ``` --- # Jest 단위 테스트 예시 (2/2) #### 테스트 코드 작성 (`sum.test.js`) ```js const sum = require('./sum'); test('adds 1 + 2 to equal 3', () => { expect(sum(1, 2)).toBe(3); }); ``` #### 테스트 실행 ```bash npx jest ``` --- # Jest 통합 테스트 예시 (1/3) #### Express 서버 (`app.js`) ```js const express = require('express'); const app = express(); app.use(express.json()); app.get('/user/:id', (req, res) => { const user = { id: req.params.id, name: 'John Doe' }; res.status(200).json(user); }); module.exports = app; ``` --- # Jest 통합 테스트 예시 (2/3) #### 서버 실행 파일 (`server.js`) ```javascript const app = require('./app'); const PORT = 3000; app.listen(PORT, () => { console.log(`Server is running on port ${PORT}`); }); ``` --- # Jest 통합 테스트 예시 (3/3) #### 통합 테스트 코드 (`app.test.js`) ```javascript const request = require('supertest'); const app = require('./app'); describe('GET /user/:id', () => { it('should return user data with the given id', async () => { const userId = 1; const response = await request(app).get(`/user/${userId}`); expect(response.statusCode).toBe(200); expect(response.body).toHaveProperty('id', userId.toString()); expect(response.body).toHaveProperty('name', 'Inje Lee'); }); }); ``` #### 테스트 실행 ```bash npx jest ``` --- ![width:360px bg right](https://cdn.markslides.ai/users/1/images/KaD8r4pQlx5hEODKoDV_e) # Testing Library --- # ![h:48px](https://cdn.markslides.ai/users/1/images/KaD8r4pQlx5hEODKoDV_e) [Testing Library](https://testing-library.com/) 사용자 중심 방식으로 UI 컴포넌트를 테스트하는 데 도움을 주는 패키지 모음 - [React Testing Library](https://github.com/testing-library/react-testing-library) - React DOM 테스팅 유틸리티 - [Vue Testing Library](https://github.com/testing-library/vue-testing-library) - Vue.js 테스팅 유틸리티 --- # ![h:48px](https://raw.githubusercontent.com/testing-library/react-testing-library/main/other/goat.png) [React Testing Library](https://github.com/testing-library/react-testing-library) 예시 (1/2) #### React 컴포넌트 (`MyComponent.js`) ```javascript import React, { useState } from 'react'; function MyComponent() { const [text, setText] = useState('Hello, World!'); return (

{text}

); } export default MyComponent; ``` --- # ![h:48px](https://raw.githubusercontent.com/testing-library/react-testing-library/main/other/goat.png) [React Testing Library](https://github.com/testing-library/react-testing-library) 예시 (2/2) #### 테스트 코드 (`MyComponent.test.js`) ```javascript import React from 'react'; import { render, screen, fireEvent } from '@testing-library/react'; import MyComponent from './MyComponent'; test('renders initial text and changes text on button click', () => { // 컴포넌트 렌더링 render(); // 초기 텍스트가 화면에 표시되는지 확인 const initialText = screen.getByText('Hello, World!'); expect(initialText).toBeInTheDocument(); // 버튼 클릭 const button = screen.getByText('Click me'); fireEvent.click(button); // 텍스트가 변경되었는지 확인 const updatedText = screen.getByText('You clicked the button!'); expect(updatedText).toBeInTheDocument(); }); ``` --- ![bg right w:50%](https://cdn.markslides.ai/users/1/images/xvDlAoJJ-9u0ZyMPlik8P) # Cypress --- # [Cypress](https://www.cypress.io/) - 대표적인 E2E 테스팅 도구 - 빠른 실행 속도와 Realtime Reloading 기능을 제공 - 디버깅이 용이하며, 자동화된 브라우저 테스트를 지원 - 다양한 브라우저 지원 - CI/CD 통합 가능 --- # Cypress 테스트 예시 코드 (`my_test.cy.js`) ```ts describe('My First Cypress Test', () => { it('should change text on button click', () => { // 테스트할 페이지 방문 cy.visit('http://localhost:3000'); // 초기 텍스트가 표시되는지 확인 cy.contains('Initial text').should('be.visible'); // 버튼 클릭 cy.get('#change-text').click(); // 텍스트가 변경되었는지 확인 cy.contains('Text after click').should('be.visible'); }); }); ``` --- ![bg right w:70%](https://cdn.markslides.ai/users/1/images/FjT61lrfWjOBE1pqZyM-T) # Playwright --- # [Playwright](https://playwright.dev/) - Microsoft에서 개발한 오픈 소스 자동화 도구 - 크로스 브라우저를 지원하며, 강력한 API를 통해 다양한 테스트 시나리오를 구현할 수 있음 - 병렬 테스트 실행이 가능하며, 자동화된 스크린샷 및 비디오 기능 제공 - CI/CD 통합이 용이함 - 다양한 언어 지원 (JavaScript, TypeScript, Python, C#) --- # Playwright 테스트 예시 코드 (`my_test.spec.js`) ```ts import { test, expect } from '@playwright/test'; test('should change text on button click', async ({ page }) => { // 테스트할 페이지 방문 await page.goto('http://localhost:3000'); // 초기 텍스트가 표시되는지 확인 await expect(page.locator('#text')).toHaveText('Initial text'); // 버튼 클릭 await page.click('#change-text'); // 텍스트가 변경되었는지 확인 await expect(page.locator('#text')).toHaveText('Text after click'); }); ``` --- # References - https://jestjs.io/ - https://testing-library.com/ - https://www.cypress.io/ - https://playwright.dev/ --- # Thank you! ## Made with ♥ by [Soaple](https://www.soaple.io/)