Jasmine vs Jest vs Mocha vs QUnit：前端测试框架深度对比

在现代前端开发中，选择合适的测试框架直接影响开发效率、测试覆盖率和长期维护成本。jasmine、jest、mocha 和 qunit 虽同属 JavaScript 测试工具，但各自的设计哲学和适用场景大不相同。本文从真实工程角度出发，通过代码示例和关键特性对比，帮助你做出明智选择。

🧪 测试结构与语法风格

不同框架对测试用例的组织方式直接影响代码可读性。

jasmine 采用经典的 BDD 风格，使用 describe/it/expect，所有功能内置。

// jasmine
describe('Calculator', () => {
  it('adds two numbers', () => {
    expect(add(1, 2)).toBe(3);
  });

  it('spies on function calls', () => {
    const spy = jasmine.createSpy('add');
    spy(1, 2);
    expect(spy).toHaveBeenCalledWith(1, 2);
  });
});

jest 语法与 jasmine 高度相似（因早期 fork 自 jasmine），但扩展了更多功能，如 test 别名。

// jest
test('adds two numbers', () => {
  expect(add(1, 2)).toBe(3);
});

describe('async operations', () => {
  it('fetches user data', async () => {
    const user = await fetchUser();
    expect(user.name).toBe('Alice');
  });
});

mocha 本身只提供测试结构（describe/it），断言需搭配其他库（如 Chai）。

// mocha + chai
const { expect } = require('chai');

describe('Calculator', () => {
  it('adds two numbers', () => {
    expect(add(1, 2)).to.equal(3);
  });
});

qunit 使用更传统的 QUnit.test，风格接近 xUnit，适合习惯 TDD 的开发者。

// qunit
QUnit.test('adds two numbers', assert => {
  assert.equal(add(1, 2), 3);
});

QUnit.module('Async tests', () => {
  QUnit.test('fetches user', async assert => {
    const user = await fetchUser();
    assert.equal(user.name, 'Alice');
  });
});

🧩 异步测试支持

现代应用大量依赖异步操作，各框架处理方式如下：

jasmine 支持 done 回调、async/await 和 Promise。

// jasmine async
it('fetches data', async () => {
  const data = await fetchData();
  expect(data).toBeTruthy();
});

it('uses done callback', (done) => {
  fetchData().then(data => {
    expect(data).toBeTruthy();
    done();
  });
});

jest 原生支持 async/await，并提供 waitFor 等工具用于测试异步 UI。

// jest async
test('fetches data', async () => {
  const data = await fetchData();
  expect(data).toBeTruthy();
});

mocha 同样支持 async/await、done 和返回 Promise。

// mocha async
it('fetches data', async () => {
  const data = await fetchData();
  expect(data).to.exist;
});

qunit 通过 assert.async() 或 async/await 处理异步。

// qunit async
QUnit.test('fetches data', async assert => {
  const data = await fetchData();
  assert.ok(data);
});

QUnit.test('uses async callback', assert => {
  const done = assert.async();
  fetchData().then(data => {
    assert.ok(data);
    done();
  });
});

🧪 断言与 Mock 能力

jasmine 内置丰富的 matcher（如 toBe, toEqual, toHaveBeenCalled）和 spy 功能。

// jasmine spy
const obj = { method: () => {} };
spyOn(obj, 'method');
obj.method();
expect(obj.method).toHaveBeenCalled();

jest 提供更强大的 mock 系统，包括自动 mock 模块、jest.fn() 和 jest.mock()。

// jest mock
jest.mock('./api');
const mockApi = require('./api');
mockApi.fetchUser.mockResolvedValue({ name: 'Alice' });

mocha 本身无断言或 mock，需依赖 Chai（断言）和 Sinon（spy/stub）。

// mocha + sinon + chai
const sinon = require('sinon');
const { expect } = require('chai');

const stub = sinon.stub(api, 'fetchUser').resolves({ name: 'Alice' });
expect(await api.fetchUser()).to.deep.equal({ name: 'Alice' });
stub.restore();

qunit 内置基本断言（equal, ok, deepEqual），mock 需手动实现或使用插件。

// qunit basic assertion
QUnit.test('basic check', assert => {
  assert.equal(1 + 1, 2);
  assert.ok(true);
});

📸 快照测试与覆盖率

jest 是唯一原生支持快照测试的框架，且内置 Istanbul 集成，一行命令即可生成覆盖率报告。

// jest snapshot
test('component renders correctly', () => {
  const tree = renderer.create(<Button />).toJSON();
  expect(tree).toMatchSnapshot();
});
// CLI: jest --coverage

jasmine、mocha 和 qunit 均不支持快照测试。覆盖率需借助外部工具（如 nyc + Istanbul）：

# mocha + nyc
nyc mocha

# jasmine + nyc
nyc jasmine

# qunit 需通过 Karma 或自定义脚本集成

🌐 浏览器与 Node.js 支持

• jasmine：官方提供 jasmine-core（浏览器）和 jasmine-npm（Node.js），两者 API 一致。
• jest：基于 JSDOM 模拟浏览器环境，原生运行于 Node.js，适合无头测试。
• mocha：通过 mocha CLI 运行于 Node.js，配合 Karma 可在真实浏览器中执行。
• qunit：最初为浏览器设计，现也支持 Node.js（qunit CLI），但主要优势仍在浏览器端。

🔧 配置复杂度与生态系统

• jest：零配置启动，但高级定制（如自定义 transformer）需深入文档。
• mocha：高度可插拔，但需手动集成断言、mock、报告器等，适合有经验的团队。
• jasmine：配置简单，适合快速开始，但扩展性有限。
• qunit：配置极简，适合小型项目或传统 Web 应用，现代前端工具链支持较弱。

📊 总结：如何选择？

💡 最终建议

• 新项目：优先考虑 jest，尤其使用 React/Vue 时。
• 遗留系统或 jQuery 项目：qunit 或 jasmine 更平滑。
• 需要精细控制测试流程：mocha 提供最大自由度。

无论选择哪个框架，关键是保持测试的可读性、可靠性和运行速度 —— 这才是高质量测试套件的核心。