登录
注册
开源
企业版
高校版
搜索
帮助中心
使用条款
关于我们
开源
企业版
高校版
私有云
模力方舟
AI 队友
登录
注册
代码拉取完成,页面将自动刷新
捐赠
捐赠前请先登录
取消
前往登录
扫描微信二维码支付
取消
支付完成
支付提示
将跳转至支付宝完成支付
确定
取消
Watch
不关注
关注所有动态
仅关注版本发行动态
关注但不提醒动态
23
Star
192
Fork
47
yanleweb
/
interview-question
代码
Issues
1091
Pull Requests
0
Wiki
统计
流水线
服务
质量分析
Jenkins for Gitee
腾讯云托管
腾讯云 Serverless
悬镜安全
阿里云 SAE
Codeblitz
SBOM
我知道了,不再自动展开
更新失败,请稍后重试!
移除标识
内容风险标识
本任务被
标识为内容中包含有代码安全 Bug 、隐私泄露等敏感信息,仓库外成员不可访问
单测中,如果有一些三方依赖,想排除这个三方依赖进行测试,该如何做?【热度: 387】
待办的
#IBW9RM
yanleweb
拥有者
创建于
2025-03-25 23:44
**关键词**:前端单测,如何排除三方依赖 在单元测试里,当存在三方依赖时,为保证测试的独立性与稳定性,你可以采用模拟(Mock)或桩(Stub)的方式排除这些三方依赖。下面结合不同的测试框架和场景,介绍具体的实现方法。 ### 使用 Jest 进行模拟 Jest 是一个功能强大的 JavaScript 测试框架,它内置了模拟功能,可方便地模拟三方依赖。 #### 模拟模块 若三方依赖以模块形式引入,可使用 `jest.mock` 方法模拟该模块。 **示例代码**: ```javascript // api.js (三方依赖模块) export const fetchData = async () => { const response = await fetch("https://example.com/api/data"); return response.json(); }; // myModule.js (使用三方依赖的模块) import { fetchData } from "./api"; export const processData = async () => { const data = await fetchData(); return data.length; }; // myModule.test.js (测试文件) import { processData } from "./myModule"; jest.mock("./api"); import { fetchData } from "./api"; describe("processData", () => { test("should return the length of the data", async () => { const mockData = ["item1", "item2", "item3"]; fetchData.mockResolvedValue(mockData); const result = await processData(); expect(result).toBe(mockData.length); }); }); ``` 在上述示例中,`jest.mock('./api')` 模拟了 `api.js` 模块,`fetchData.mockResolvedValue(mockData)` 指定了 `fetchData` 函数的返回值。 #### 模拟全局对象或函数 若三方依赖是全局对象或函数,可使用 `jest.spyOn` 或直接覆盖该对象或函数。 **示例代码**: ```javascript // myFunction.js export const myFunction = () => { return Math.random(); }; // myFunction.test.js import { myFunction } from "./myFunction"; describe("myFunction", () => { test("should return a mocked value", () => { const originalMathRandom = Math.random; Math.random = () => 0.5; const result = myFunction(); expect(result).toBe(0.5); Math.random = originalMathRandom; }); }); ``` 此例中,通过覆盖 `Math.random` 函数来模拟其返回值,测试结束后恢复原始函数。 ### 使用 Sinon 进行模拟 Sinon 是一个流行的 JavaScript 测试工具,可创建间谍(spy)、存根(stub)和模拟(mock)对象。 #### 安装 Sinon ```bash npm install --save-dev sinon ``` #### 使用 Sinon 存根函数 ```javascript // api.js export const fetchData = async () => { const response = await fetch("https://example.com/api/data"); return response.json(); }; // myModule.js import { fetchData } from "./api"; export const processData = async () => { const data = await fetchData(); return data.length; }; // myModule.test.js import sinon from "sinon"; import { processData } from "./myModule"; import { fetchData } from "./api"; describe("processData", () => { let stub; beforeEach(() => { stub = sinon.stub(); stub.resolves(["item1", "item2", "item3"]); sinon.replace(fetchData, "fetchData", stub); }); afterEach(() => { sinon.restore(); }); test("should return the length of the data", async () => { const result = await processData(); expect(result).toBe(3); }); }); ``` 在这个示例中,使用 `sinon.stub` 创建一个存根函数,使用 `sinon.replace` 替换 `fetchData` 函数,测试结束后使用 `sinon.restore` 恢复原始函数。 通过以上方法,你可以在单元测试中排除三方依赖,确保测试的独立性和稳定性。
**关键词**:前端单测,如何排除三方依赖 在单元测试里,当存在三方依赖时,为保证测试的独立性与稳定性,你可以采用模拟(Mock)或桩(Stub)的方式排除这些三方依赖。下面结合不同的测试框架和场景,介绍具体的实现方法。 ### 使用 Jest 进行模拟 Jest 是一个功能强大的 JavaScript 测试框架,它内置了模拟功能,可方便地模拟三方依赖。 #### 模拟模块 若三方依赖以模块形式引入,可使用 `jest.mock` 方法模拟该模块。 **示例代码**: ```javascript // api.js (三方依赖模块) export const fetchData = async () => { const response = await fetch("https://example.com/api/data"); return response.json(); }; // myModule.js (使用三方依赖的模块) import { fetchData } from "./api"; export const processData = async () => { const data = await fetchData(); return data.length; }; // myModule.test.js (测试文件) import { processData } from "./myModule"; jest.mock("./api"); import { fetchData } from "./api"; describe("processData", () => { test("should return the length of the data", async () => { const mockData = ["item1", "item2", "item3"]; fetchData.mockResolvedValue(mockData); const result = await processData(); expect(result).toBe(mockData.length); }); }); ``` 在上述示例中,`jest.mock('./api')` 模拟了 `api.js` 模块,`fetchData.mockResolvedValue(mockData)` 指定了 `fetchData` 函数的返回值。 #### 模拟全局对象或函数 若三方依赖是全局对象或函数,可使用 `jest.spyOn` 或直接覆盖该对象或函数。 **示例代码**: ```javascript // myFunction.js export const myFunction = () => { return Math.random(); }; // myFunction.test.js import { myFunction } from "./myFunction"; describe("myFunction", () => { test("should return a mocked value", () => { const originalMathRandom = Math.random; Math.random = () => 0.5; const result = myFunction(); expect(result).toBe(0.5); Math.random = originalMathRandom; }); }); ``` 此例中,通过覆盖 `Math.random` 函数来模拟其返回值,测试结束后恢复原始函数。 ### 使用 Sinon 进行模拟 Sinon 是一个流行的 JavaScript 测试工具,可创建间谍(spy)、存根(stub)和模拟(mock)对象。 #### 安装 Sinon ```bash npm install --save-dev sinon ``` #### 使用 Sinon 存根函数 ```javascript // api.js export const fetchData = async () => { const response = await fetch("https://example.com/api/data"); return response.json(); }; // myModule.js import { fetchData } from "./api"; export const processData = async () => { const data = await fetchData(); return data.length; }; // myModule.test.js import sinon from "sinon"; import { processData } from "./myModule"; import { fetchData } from "./api"; describe("processData", () => { let stub; beforeEach(() => { stub = sinon.stub(); stub.resolves(["item1", "item2", "item3"]); sinon.replace(fetchData, "fetchData", stub); }); afterEach(() => { sinon.restore(); }); test("should return the length of the data", async () => { const result = await processData(); expect(result).toBe(3); }); }); ``` 在这个示例中,使用 `sinon.stub` 创建一个存根函数,使用 `sinon.replace` 替换 `fetchData` 函数,测试结束后使用 `sinon.restore` 恢复原始函数。 通过以上方法,你可以在单元测试中排除三方依赖,确保测试的独立性和稳定性。
评论 (
0
)
登录
后才可以发表评论
状态
待办的
待办的
进行中
已完成
已关闭
负责人
未设置
标签
工程化
未设置
标签管理
里程碑
高
未关联里程碑
Pull Requests
未关联
未关联
关联的 Pull Requests 被合并后可能会关闭此 issue
分支
未关联
分支 (1)
标签 (64)
master
0.0.76
0.0.75
0.0.74
0.0.73
0.0.72
0.0.71
0.0.70
0.0.69
0.0.68
0.0.67
0.0.66
0.0.65
0.0.64
0.0.63
0.0.62
0.0.61
0.0.60
0.0.59
0.0.58
0.0.57
0.0.56
0.0.55
0.0.54
0.0.53
0.0.52
0.0.51
0.0.50
0.0.49
0.0.48
0.0.47
0.0.46
0.0.45
0.0.44
0.0.43
0.0.42
0.0.41
0.0.40
0.0.39
0.0.38
0.0.37
0.0.36
0.0.35
0.0.34
0.0.33
0.0.32
0.0.31
0.0.30
0.0.29
0.0.28
0.0.27
0.0.26
0.0.25
0.0.24
0.0.23
0.0.22
0.0.21
0.0.20
0.0.19
0.0.18
0.0.17
0.0.16
0.0.15
0.0.14
0.0.13
开始日期   -   截止日期
-
置顶选项
不置顶
置顶等级:高
置顶等级:中
置顶等级:低
优先级
不指定
严重
主要
次要
不重要
参与者(1)
TypeScript
1
https://gitee.com/yanleweb/interview-question.git
git@gitee.com:yanleweb/interview-question.git
yanleweb
interview-question
interview-question
点此查找更多帮助
搜索帮助
Git 命令在线学习
如何在 Gitee 导入 GitHub 仓库
Git 仓库基础操作
企业版和社区版功能对比
SSH 公钥设置
如何处理代码冲突
仓库体积过大,如何减小?
如何找回被删除的仓库数据
Gitee 产品配额说明
GitHub仓库快速导入Gitee及同步更新
什么是 Release(发行版)
将 PHP 项目自动发布到 packagist.org
评论
仓库举报
回到顶部
登录提示
该操作需登录 Gitee 帐号,请先登录后再操作。
立即登录
没有帐号,去注册