Using JasmineJasmine 测试框架指南

观看完本视频后，您将能够：

• 定义 Jasmine 及其基本概念
• 掌握 使用 Jasmine 进行 JavaScript 代码测试的步骤
• 了解 如何在 React 项目中使用 Jasmine 进行测试

---

什么是 Jasmine？

Jasmine 是一个 开源 JavaScript 单元测试框架，可用于多种环境，包括 独立运行、Ruby Gem、Node.js 等。
它的设置简单、测试编写便捷，受 JS Spec、Rspec、Jspec 等框架的影响较大。

📌 Jasmine 的核心特点： ✅ 测试描述清晰，接近自然语言，非技术人员也能理解
✅ 独立运行，无需依赖 DOM
✅ 适用于前端 & 后端测试
✅ 支持同步 & 异步测试
✅ 支持模拟函数（Spies），方便测试 API 调用

---

Jasmine 的基本概念

1 测试套件（Suite）

• 测试套件 是 一组测试用例，用于验证 JavaScript 对象或函数的行为。
• 使用 describe() 方法创建测试套件。

describe('数学计算', function() {
  // 这里可以包含多个测试用例
});

---

2 规格（Spec）

• 规格（Spec） 是 测试套件中的单个测试用例。
• 使用 it() 方法定义。

describe('数学计算', function() {
  it('1 + 2 应该等于 3', function() {
    expect(1 + 2).toBe(3);
  });
});

---

3 期望（Expectation）

• 期望（Expectation） 是一个 断言，表示一个值应该符合预期。
• 使用 expect().toBe() 方法定义。

expect(1 + 2).toBe(3); // 断言 1 + 2 的结果应该是 3

---

4 匹配器（Matchers）

• 匹配器（Matchers） 用于比较 实际值 与 预期值，判断测试是否通过。

describe('匹配器示例', function() {
  it('检查值是否正确', function() {
    expect([1, 2, 3]).toContain(2); // 数组包含 2
    expect(null).toBeFalsy(); // null 被认为是假值
  });
});

---

5 描述函数（Describe Function）

• describe() 用于组织相关的测试用例，帮助分类和管理测试。

describe('数学计算', function() {
  it('加法测试', function() {
    expect(2 + 3).toBe(5);
  });

  it('减法测试', function() {
    expect(5 - 3).toBe(2);
  });
});

---

6 伪对象（Spies）

• Spies 是 Jasmine 的模拟函数，可用于跟踪函数的调用情况。
• 常见功能：
  • 监控函数调用次数
  • 记录传递的参数
  • 返回自定义值
  • 模拟 API 调用

describe('测试 spies', function() {
  it('应跟踪函数调用情况', function() {
    let obj = {
      sayHello: function(name) {
        return `Hello, ${name}`;
      }
    };

    spyOn(obj, 'sayHello').and.returnValue('Hi there!');
    
    expect(obj.sayHello('Tom')).toBe('Hi there!');
    expect(obj.sayHello).toHaveBeenCalled(); // 断言函数被调用过
    expect(obj.sayHello).toHaveBeenCalledWith('Tom'); // 断言传入参数
  });
});

---

使用 Jasmine 进行 JavaScript 代码测试

1 安装 Jasmine

• 下载 Jasmine（独立版本）
• 使用 NPM 安装

npm install --save-dev jasmine

---

2 初始化 Jasmine

npx jasmine init

---

3 创建测试文件

• 创建 spec 目录
• 添加测试文件，例如 math.spec.js

mkdir spec
touch spec/math.spec.js

---

4 运行测试

npx jasmine

---

在 React 项目中使用 Jasmine 进行测试

1 安装 Jasmine

npm install --save-dev jasmine react-addons-test-utils

---

2 配置 Jasmine

• 创建 jasmine.json 配置文件

{
  "spec_dir": "spec",
  "spec_files": ["**/*.spec.js"],
  "helpers": ["helpers/**/*.js"]
}

---

3 使用 React 测试工具

import React from 'react';
import ReactTestUtils from 'react-dom/test-utils';
import MyComponent from '../src/MyComponent';

describe('React 组件测试', function() {
  it('应正确渲染组件', function() {
    const component = ReactTestUtils.renderIntoDocument(<MyComponent />);
    expect(component).toBeDefined();
  });
});

---

4 运行 React 测试

npx jasmine

---

总结

📌 Jasmine 是一个简单易用、开箱即用的 JavaScript 测试框架，非常适合前端和后端的单元测试。掌握这些基本概念和测试方法，将帮助您更高效地进行项目开发！ 🚀