8.1 프론트엔드 테스트
이번 단계에서는 우리가 만든 멀티 컨테이너 애플리케이션을 테스트하고 디버깅하는 방법을 살펴볼 거야. 테스트를 통해 에러를 찾고 수정하며, 시스템의 모든 컴포넌트가 잘 작동하는지 확인할 수 있어.
ReactJS 프론트엔드 테스트를 위해 Jest와 React Testing Library를 사용할 거야.
Jest와 React Testing Library 설치
1단계. 의존성 설치:
cd frontend
npm install --save-dev jest @testing-library/react @testing-library/jest-dom
2단계. Jest 설정:
jest.config.js 파일을 frontend 디렉토리에 생성해봐:
module.exports = {
setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
testEnvironment: 'jsdom',
};
3단계. setupTests.js 파일 생성:
setupTests.js 파일을 frontend/src 디렉토리에 생성해:
import '@testing-library/jest-dom/extend-expect';
4단계. 컴포넌트 테스트 작성
TaskList 컴포넌트를 위한 테스트 파일을 frontend/src 디렉토리에 작성해봐:
import React from 'react';
import { render, screen } from '@testing-library/react';
import TaskList from './TaskList';
test('Task List 헤딩 렌더링 확인', () => {
render(<TaskList />);
const headingElement = screen.getByText(/Task List/i);
expect(headingElement).toBeInTheDocument();
});
5단계. 테스트 실행
테스트를 실행하려면 다음 명령어를 사용해봐:
npm test
8.2 백엔드 테스트
Flask에서 백엔드를 테스트하기 위해 unittest 라이브러리를 사용할 거야.
종속성 설치:
cd ../backend
pip install Flask-Testing
엔드포인트에 대한 테스트 작성
백엔드 디렉토리에 tests 디렉토리와 test_routes.py 파일을 만들어:
import unittest
from app import app, db
from app.models import User, Task
class BasicTests(unittest.TestCase):
def setUp(self):
app.config['TESTING'] = True
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///:memory:'
self.app = app.test_client()
db.create_all()
def tearDown(self):
db.session.remove()
db.drop_all()
def test_user_registration(self):
response = self.app.post('/register', json={
'username': 'testuser',
'password': 'testpassword'
})
self.assertEqual(response.status_code, 201)
def test_task_creation(self):
self.app.post('/register', json={
'username': 'testuser',
'password': 'testpassword'
})
access_token = self.app.post('/login', json={
'username': 'testuser',
'password': 'testpassword'
}).json['access_token']
response = self.app.post('/tasks', json={
'title': '테스트 작업',
'description': '테스트 설명',
'owner_id': 1,
'status': '완료되지 않음'
}, headers={'Authorization': f'Bearer {access_token}'})
self.assertEqual(response.status_code, 201)
if __name__ == "__main__":
unittest.main()
테스트 실행
테스트를 실행하려면 다음 명령을 사용해:
python -m unittest discover
8.3 통합 테스트
통합 테스트는 시스템 구성 요소 간의 상호 작용을 확인하는 거야.
테스트 환경 설정
통합 테스트를 위해 Docker Compose를 사용할 거야. 테스트 환경에서 모든 서비스를 시작할 수 있게 도와줘.
1단계. 테스트를 위한 Docker Compose 파일 생성:
프로젝트의 루트 디렉토리에 docker-compose.test.yml 파일을 만들어:
version: '3'
services:
frontend:
build: ./frontend
ports:
- "3001:3000"
networks:
- task-network
backend:
build: ./backend
ports:
- "5001:5000"
depends_on:
- database
networks:
- task-network
environment:
- DATABASE_URL=postgresql://taskuser:taskpassword@database:5432/taskdb
database:
image: postgres:13
environment:
- POSTGRES_DB=taskdb
- POSTGRES_USER=taskuser
- POSTGRES_PASSWORD=taskpassword
networks:
- task-network
volumes:
- db-data:/var/lib/postgresql/data
networks:
task-network:
driver: bridge
volumes:
db-data:
2단계. 테스트 환경 시작:
테스트 환경에서 모든 서비스를 시작하려면 다음 명령을 사용해:
docker compose -f docker-compose.test.yml up --build
통합 테스트 작성
통합 테스트는 다양한 도구를 사용해서 쓸 수 있어. 그 중 하나는 Selenium을 사용해서 사용자 인터페이스 자동화를 테스트하는 방법이야.
1단계. Selenium 설치:
pip install selenium
2단계. 통합 테스트 작성:
tests 디렉토리에 test_integration.py 파일을 만들어:
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
def test_frontend():
driver = webdriver.Chrome()
driver.get("http://localhost:3001")
assert "Task List" in driver.title
driver.close()
if __name__ == "__main__":
test_frontend()
3단계. 통합 테스트 실행:
통합 테스트를 실행하려면 다음 명령을 사용해:
python tests/test_integration.py
8.4 디버깅
디버깅을 위해 컨테이너 로그와 모니터링 도구를 사용할 수 있어.
컨테이너 로그 확인
로그를 확인하려면 다음 명령어를 사용해:
docker compose logs
모니터링 도구 사용
이전에 설정한 Prometheus와 Grafana를 사용해 메트릭과 서비스 상태를 모니터링해.
- Grafana 웹 인터페이스로 이동: 브라우저를 열고
http://localhost:3033로 이동해. - 대시보드 확인: 생성된 대시보드를 사용하여 서비스의 성능과 상태를 추적해봐.
GO TO FULL VERSION