Jest进阶知识：模拟 ES6 类 - 掌握类的依赖模拟与方法监听技巧

引言

在现代前端开发中，ES6 类（class）是常用的一种面向对象编程方式。在测试类的时候，我们经常需要模拟类的依赖，以避免外部因素对测试结果的影响。Jest 提供了强大的工具来模拟类及其方法，确保测试的高效性和准确性。本文将详细介绍如何在 Jest 中模拟 ES6 类，确保类的依赖和方法在测试中能够高效、准确地运行。

模拟类的依赖

在测试一个模块时，如果该模块依赖了其他类，为了屏蔽其影响，我们需要模拟这些依赖的类。jest.mock 方法可以帮助我们实现这一点。

使用示例

假设我们有一个 ReviewCollector 类，它依赖于 ProductReview 类：

// reviewCollector.ts
import ProductReview from "./productReview";class ReviewCollector {private productList: Map<string, { good: number, total: number }> = new Map();addReview(review: ProductReview) {const productName = review.name;const isGood = review.review.includes("好用");if (!this.productList.has(productName)) {this.productList.set(productName, { good: 0, total: 0 });}const product = this.productList.get(productName)!;product.total++;if (isGood) {product.good++;}}getNumGoodReview(productName: string): number {const product = this.productList.get(productName);return product ? product.good : 0;}
}export default ReviewCollector;

// productReview.ts
class ProductReview {constructor(public name: string, public review: string) {}static showInfo(): string {return "这是一个产品评论";}
}export default ProductReview;

为了测试 ReviewCollector 类，我们需要模拟 ProductReview 类：

import ReviewCollector from "../ts/reviewCollector";
import ProductReview from "../ts/productReview";// 使用 jest.mock 模拟 ProductReview 类
jest.mock("../ts/productReview", () => {return jest.fn().mockImplementation((name: string, review: string) => {return {name,review,};});
});describe("测试 ReviewCollector", () => {let collector: ReviewCollector;beforeEach(() => {collector = new ReviewCollector();});test("能够添加一条评论", () => {const review = new ProductReview("产品A", "好用");collector.addReview(review);// 进行断言测试expect(collector.getNumGoodReview("产品A")).toBe(1);expect(collector["productList"].has("产品A")).toBe(true);});test("能够获取好评数", () => {const review1 = new ProductReview("产品A", "好用");const review2 = new ProductReview("产品A", "一般");const review3 = new ProductReview("产品B", "好用");collector.addReview(review1);collector.addReview(review2);collector.addReview(review3);// 进行断言测试expect(collector.getNumGoodReview("产品A")).toBe(1);expect(collector.getNumGoodReview("产品B")).toBe(1);});
});

在这个示例中，我们使用 jest.mock 模拟了 ProductReview 类，使其返回一个简单的对象，从而避免了外部因素对测试结果的影响。

监听类的方法

有时候，我们需要对类的方法进行监听，以验证这些方法是否被正确调用。jest.spyOn 方法可以帮助我们实现这一点。

使用示例

假设我们想对 ProductReview 类的 getter 方法和静态方法进行监听：

import ProductReview from "../ts/productReview";// 模拟类的 getter
const mockName = jest.spyOn(ProductReview.prototype, "name", "get").mockImplementation(() => "小米手机");
const mockReview = jest.spyOn(ProductReview.prototype, "review", "get").mockImplementation(() => "很好用");// 模拟类的静态方法
const mockStatic = jest.spyOn(ProductReview, "showInfo").mockImplementation(() => "静态方法");test("ProductReview", () => {const p = new ProductReview("", "");const result = ProductReview.showInfo();// 断言expect(mockStatic).toHaveBeenCalled();expect(result).toBe("静态方法");expect(p.name).toBe("小米手机");expect(p.review).toBe("很好用");expect(mockName).toHaveBeenCalled();expect(mockReview).toHaveBeenCalled();
});