如何利用Debian进行JS测试

在 Debian 上进行 JavaScript 测试的高效实践

一 环境准备

• 更新索引并安装运行时与包管理工具：
  • 命令：sudo apt update && sudo apt install -y nodejs npm
  • 验证：node -v、npm -v
• 如需多版本管理，可使用 nvm（可选）：
  • 安装：curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
  • 重载：source ~/.bashrc
  • 使用：nvm install 18 && nvm use 18（示例选择 Node.js 18 LTS）

二 选择测试框架与断言库

• 常用组合与适用场景：
  • Jest：零配置、断言与 Mock 一体，适合单元/集成测试与覆盖率统计
  • Mocha + Chai：灵活可扩展，适合需要自定义断言/报告的项目
  • Jasmine：开箱即用，适合不依赖构建工具的前端或 Node 项目
• 安装示例（以 Jest 为例）：
  • 开发依赖：npm i -D jest
  • 运行测试：npx jest 或在 package.json 配置脚本：“test”: “jest” 后执行 npm test
• 简单测试示例（Jest）：
  • 被测代码：sum.js

    function sum(a, b) { return a + b; }
    module.exports = sum;
    

  • 测试代码：sum.test.js

    const sum = require('./sum');
    test('adds 1 + 2 to equal 3', () => {
      expect(sum(1, 2)).toBe(3);
    });
    

  • 运行：npm test（或 npx jest）

三 运行与调试

• 命令行运行
  • 直接运行：node your-script.js
  • 运行测试：npm test（或 npx jest）
• 调试 Node.js 程序
  • 启动调试：node --inspect app.js 或 node --inspect-brk app.js（首行暂停）
  • 在 Chrome 打开：chrome://inspect → 点击 Open dedicated DevTools for Node 设置断点、单步执行
• 调试测试
  • VS Code：创建 .vscode/launch.json，选择 Node.js 环境，配置 program 指向测试文件或 jest 运行器，F5 启动调试
  • Jest 调试：在测试文件中设置断点，使用 node --inspect-brk node_modules/.bin/jest --runInBand 启动，再在 chrome://inspect 连接调试

四 前端与端到端测试

• 浏览器环境测试
  • 使用 Jest 搭配 jsdom 进行 DOM/API 模拟的单元测试
  • 使用 Playwright 或 Puppeteer 进行组件/端到端测试（示例安装：npm i -D playwright，运行：npx playwright test）
• 跨浏览器与持续集成
  • 跨浏览器：使用 BrowserStack 或 Selenium 在多种浏览器/系统组合上执行自动化测试
  • CI/CD：在 GitHub Actions/Jenkins 中配置测试矩阵，确保每次提交自动运行测试并生成报告

五 质量保障与工程化配置

• 代码规范与静态检查
  • ESLint：统一代码风格、发现潜在错误
  • Prettier：自动格式化，配合 ESLint 使用
• 依赖与锁文件
  • 使用 package-lock.json 或 yarn.lock 锁定依赖版本，保证一致性
• 覆盖率与报告
  • Jest 内置覆盖率：–coverage 生成 lcov 报告，可集成 Codecov 或 SonarQube
• 示例 package.json 片段

  {
    "name": "my-js-project",
    "version": "1.0.0",
    "scripts": {
      "test": "jest --coverage",
      "test:watch": "jest --watch"
    },
    "devDependencies": {
      "jest": "^29",
      "eslint": "^8",
      "prettier": "^3"
    }
  }
  

• 建议的项目结构

  my-js-project/
  ├── src/
  ├── test/
  │   ├── unit/
  │   └── e2e/
  ├── .eslintrc.js
  ├── .prettierrc
  ├── package.json
  └── README.md