前端工程化：如何为 CLI 工具构建 E2E 测试体系

#!/bin/bash
set -e  # 遇到错误立即退出

# 1. 构建项目
echo "📦 Building project..."
npm run build

# 2. 打包成 tarball
echo "📦 Packing tarball..."
npm pack

# 3. 重命名为固定名称（方便测试引用）
echo "📝 Renaming tarball..."
mv *.tgz my-cli.tgz

# 4. 运行 E2E 测试
echo "🧪 Running E2E tests..."
vitest run tests/e2e

echo "✅ All tests passed!"

// 1. npm install 能否成功
✓ 从 tarball 安装不报错
✓ pnpm install 不报错

// 2. 基础命令能否调用
✓ cli --version 能正常输出版本号
✓ cli --help 能正常输出帮助信息
✓ cli <command> 能正确找到命令

// 3. bin 字段配置正确性
✓ package.json 中 bin 字段路径正确
✓ bin 文件有执行权限（#!/usr/bin/env node）

import { describe, test, expect, beforeEach, afterEach } from "vitest";
import { execa } from "execa";
import { mkdtemp, rm } from "fs/promises";
import { tmpdir } from "os";
import { join } from "path";

describe("可用性测试", () => {
  let testDir: string;
  const cliTarball = join(__dirname, "../my-cli.tgz");

  beforeEach(async () => {
    // 创建临时测试目录
    testDir = await mkdtemp(join(tmpdir(), "cli-test-"));
    process.chdir(testDir);
  });

  afterEach(async () => {
    // 清理测试目录
    await rm(testDir, { recursive: true, force: true });
  });

  test("从 tarball 安装成功", async () => {
    const { exitCode } = await execa("npm", ["install", cliTarball]);
    expect(exitCode).toBe(0);
  });

  test("版本命令可用", async () => {
    await execa("npm", ["install", cliTarball]);
    const { stdout } = await execa("npx", ["my-cli", "--version"]);
    expect(stdout).toMatch(/\d+\.\d+\.\d+/);
  });

  test("帮助命令可用", async () => {
    await execa("npm", ["install", cliTarball]);
    const { stdout } = await execa("npx", ["my-cli", "--help"]);
    expect(stdout).toContain("Usage:");
  });
});

import { describe, test, expect, beforeEach } from "vitest";
import { execa } from "execa";
import { readFile, access } from "fs/promises";
import { join } from "path";

describe("功能性测试", () => {
  beforeEach(async () => {
    // 安装 CLI
    await execa("npm", ["install", cliTarball]);
  });

  test("命令执行成功并产生正确副作用", async () => {
    // 执行命令
    const { stdout, exitCode } = await execa("npx", [
      "my-cli",
      "generate",
      "component",
      "Button",
    ]);

    // 验证执行成功
    expect(exitCode).toBe(0);
    expect(stdout).toContain("✓ Component created");

    // 验证副作用：文件生成
    const filePath = join(testDir, "src/components/Button.tsx");
    await expect(access(filePath)).resolves.toBeUndefined();

    // 验证副作用：文件内容
    const content = await readFile(filePath, "utf-8");
    expect(content).toContain("export function Button");
  });

  test("参数处理：缺少必需参数时友好报错", async () => {
    const { stderr, exitCode } = await execa("npx", ["my-cli", "generate"], {
      reject: false,
    });

    expect(exitCode).not.toBe(0);
    expect(stderr).toMatch(/Error.*Missing required argument/i);
  });

  test("错误处理：文件已存在时提示冲突", async () => {
    // 第一次创建成功
    await execa("npx", ["my-cli", "generate", "component", "Button"]);

    // 第二次应该报错
    const { stderr, exitCode } = await execa(
      "npx",
      ["my-cli", "generate", "component", "Button"],
      { reject: false },
    );

    expect(exitCode).not.toBe(0);
    expect(stderr).toMatch(/already exists/i);
  });
});

// 1. 基础命令能否调用
test("coze --version", async () => {
  const { stdout } = await exec("coze --version");
  expect(stdout).toMatch(/\d+\.\d+\.\d+/);
});

// 2. 模板 hooks 是否生效
test("模板 hooks 正常执行", async () => {
  await exec("coze init ./ -t nextjs");
  // 验证 ejs 模板渲染
  const content = fs.readFileSync("./package.json", "utf-8");
  expect(content).not.toContain("{{"); // 无未替换的占位符
});

// 3. scripts 能否正常运行
test("npm run build 成功", async () => {
  await exec("coze init ./ -t nextjs");
  await exec("npm install");
  await exec("npm run build"); // 不抛错即成功
});

// 4. 必要文件检查
test("必要文件存在", async () => {
  await exec("coze init ./ -t nextjs");
  const requiredFiles = [
    ".gitignore",
    ".npmrc",
    "package.json",
    "pnpm-lock.yaml",
    "README.md",
    "tsconfig.json",
  ];
  requiredFiles.forEach((file) => {
    expect(fs.existsSync(file)).toBe(true);
  });
});

test("dev 模式页面正常", async () => {
  // 1. 初始化项目
  await exec("coze init ./my-app -t nextjs");

  // 2. 安装依赖
  await exec("cd my-app && npm install");

  // 3. 启动 dev server
  const devProcess = exec("npm run dev");
  await waitForPort(3000);

  // 4. 使用 Playwright 访问页面
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto("http://localhost:3000");

  // 5. 截图对比
  const screenshot = await page.screenshot();
  expect(screenshot).toMatchImageSnapshot();

  // 6. 清理
  devProcess.kill();
  await browser.close();
});

test("build + start 模式页面正常", async () => {
  // 1. 初始化项目
  await exec("coze init ./my-app -t nextjs");

  // 2. 安装依赖
  await exec("cd my-app && npm install");

  // 3. 构建
  await exec("npm run build");

  // 4. 启动生产服务器
  const startProcess = exec("npm run start");
  await waitForPort(3000);

  // 5. 验证页面
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto("http://localhost:3000");
  const screenshot = await page.screenshot();
  expect(screenshot).toMatchImageSnapshot();

  // 6. 清理
  startProcess.kill();
  await browser.close();
});