全栈项目怎么做单元测试_全栈JavaScript项目单元测试框架与实践教程

全栈项目单元测试需分层覆盖前端、后端与数据库逻辑。前端使用Jest + React Testing Library测试组件交互，如按钮点击后文本变化；后端采用Jest + Supertest验证API接口行为，如GET请求返回200状态码；数据库层通过mock模型方法隔离数据访问，避免连接真实数据库，确保测试快速且可重复。

做全栈项目的单元测试，核心是分层测试：前端、后端、数据库交互各自覆盖，确保每一部分逻辑正确。在全栈JavaScript项目中，通常使用Node.js + Express（后端）搭配React/Vue（前端），配合MongoDB或PostgreSQL等数据库。要有效进行单元测试，需选择合适的工具链并建立清晰的测试策略。

前端单元测试：用Jest + React Testing Library

前端的重点是测试组件逻辑和用户交互行为，不依赖真实DOM或浏览器环境。

• Jest 是主流测试运行器，支持快照测试、异步测试、mock函数。
• React Testing Library 帮助你以用户视角测试组件，推荐替代老旧的Enzyme。

示例：测试一个按钮点击后文本变化

const { render, screen, fireEvent } = require('@testing-library/react');
import Button from './Button';

test('按钮点击后显示"已点击"', () => {
  render();
  const button = screen.getByText('点击我');
  fireEvent.click(button);
  expect(screen.getByText('已点击')).toBeInTheDocument();
});

确保安装依赖：

npm install --save-dev jest @testing-library/react @testing-library/jest-dom

后端单元测试：Jest + Supertest 测试API接口

后端测试关注路由处理、中间件逻辑、服务方法是否按预期工作。

• Jest 同样用于后端，可mock数据库调用。
• Supertest 用来模拟HTTP请求，测试Express路由。

示例：测试GET /api/users返回200

const request = require('supertest');
const app = require('../app'); // Express应用实例

test('GET /api/users 返回200状态码', async () => {
  const response = await request(app).get('/api/users').expect(200);
  expect(response.body).toBeInstanceOf(Array);
});

避免连接真实数据库，使用mock数据：

jest.mock('../models/User');

数据库逻辑测试：Mock模型方法

不要在单元测试中连接真实数据库，应隔离数据访问层。

• jest.mock() 模拟User.findOne、User.save等方法。

• 示例：mock用户查询

  const User = require('../models/User');
  jest.mock('../models/User');
  
  test('getUserService 正确返回用户', async () => {
    User.findOne.mockResolvedValue({ name: 'Alice', email: 'alice@example.com' });
    const result = await getUserService('alice@example.com');
    expect(result.name).toBe('Alice');
  });

  测试脚本与CI集成

  在package.json中配置测试命令，便于自动化执行。

  "scripts": {
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage"
  }

  生成代码覆盖率报告，确保关键路径被覆盖。结合GitHub Actions或GitLab CI，在提交时自动运行测试。

  基本上就这些。重点是：分离关注点，前端测交互，后端测接口逻辑，数据库操作全mock。工具统一用Jest，学习成本低，生态成熟。坚持写测试，重构更有底气。