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の設定:
frontendディレクトリにjest.config.jsというファイルを作る:
module.exports = {
setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
testEnvironment: 'jsdom',
};
ステップ 3. setupTests.jsファイルの作成:
frontend/srcディレクトリにsetupTests.jsというファイルを作る:
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ファイルをbackendディレクトリに作成してね:
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
統合テストの作成
統合テストは、いくつかのツールを使って書くことができる。1つのやり方は、Seleniumを使ってUIの自動テストを行うことだね。
ステップ 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