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. 为组件编写测试
在 frontend/src 文件夹中为组件 TaskList 创建测试文件：
import React from 'react';
import { render, screen } from '@testing-library/react';
import TaskList from './TaskList';
test('renders Task List heading', () => {
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
编写集成测试
可以使用各种工具编写集成测试。其中一种方法是使用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 "任务列表" in driver.title
driver.close()
if __name__ == "__main__":
test_frontend()
步骤3. 运行集成测试：
使用以下命令运行集成测试：
python tests/test_integration.py
8.4 调试
调试可以使用容器日志和监控工具。
查看容器日志
要查看日志，请使用以下命令：
docker compose logs
使用监控工具
使用之前配置的 Prometheus 和 Grafana 来监控指标和服务状态。
- 访问 Grafana 的 web 界面： 打开浏览器并访问
http://localhost:3033。 - 查看仪表板： 使用创建的仪表板跟踪服务的性能和状态。
GO TO FULL VERSION