一、Hamock在预览场景中由于代码的运行环境与真机设备上的运行环境不同调用部分接口时无法获取到有效的返回值。这样就无法在预览时查看到不同返回值带来的界面变化。方案Hamock 提供了预览场景的模拟功能在不改变业务运行逻辑的同时可以模拟UI 组件上的属性或方法或模拟import 的模块接口适用范围仅 API 11 及以上版本的 Stage 模型工程支持。二、使用前提使用 Hamock 在预览场景模拟需要在工程或模块的oh-package.json5中添加该依赖然后重新同步工程。devDependencies: { ohos/hamock: 1.0.0 }三、UI 组件上的 MockHamock 提供了MockSetup用于修饰 Mock 方法仅支持声明式范式的组件。工作机制当预览该组件时预览运行时将在组件初始化时执行被MockSetup修饰的方法可以在这个被修饰的方法内重定义组件的方法或重赋值组件的属性其将在预览时生效说明MockSetup修饰的方法仅在预览场景会自动触发并先于组件的aboutToAppear执行。场景一Mock UI 组件的方法第一步引入 Hamockimport { MockKit, when, MockSetup } from ohos/hamock;第二步定义并修饰方法在目标组件中定义一个方法并用MockSetup修饰该方法。在这个方法中使用MockKit模拟目标方法。import { MockKit, when, MockSetup } from ohos/hamock; Entry Component struct Index { //... MockSetup randomName() { let mocker: MockKit new MockKit(); let mockfunc: Object mocker.mockFunc(this, this.method1); // mock指定的方法在指定入参的返回值 when(mockfunc)(test).afterReturn(1); } //业务场景调用方法 const result this.method1(test); // in previewer, result 1 }场景二Mock UI 组件的属性第一步引入 Hamockimport { MockSetup } from ohos/hamock;第二步定义并修饰方法在目标组件中定义一个方法并用MockSetup修饰该方法。在这个方法中对于需要 Mock 的属性可以重新赋值。属性 Mock 的限制ArkUI 部分类型属性不支持 Mock如readonly、ObjectLink。被Link/Consume/Prop/BuilderParam装饰器修饰的变量ArkUI 语法要求父容器需要有对应属性的定义。因此更推荐开发者通过定义一个预览场景父容器并通过父容器传递合适的数据来预览这一类的组件。四、模块的 Mock模块的 Mock支持对系统模块、依赖模块及本地模块的 Mock。工作机制通过新建 ArkTS 文件定义 Mock 实现代码在mock-config.json5配置文件中定义目标模块与 Mock 实现代码文件的映射关系目标模块与 Mock 实现代码文件为一对一的关系即对于同一目标模块仅支持一份 Mock 实现代码预览运行时所有页面 import 目标模块都将指向这一份 Mock 实现代码场景一系统模块 / 依赖的模块第一步新建 Mock 文件在src/mock目录下新建一个 ArkTS 文件在这个文件内定义目标模块的 Mock 实现。// src/mock/MeasureText.mock.ets import MeasureText from ohos.measure // 类的mock使用继承(extends)的方式实现 class MockMeasureText extends MeasureText { // 定义mock实现 static measureText(): number { console.log(Return value of the mock measureText function) return 100; } }; export default MockMeasureText;说明用户在对类定义 Mock 的实现时建议使用继承extends的方式实现。若不使用继承需要保证代码中使用到依赖模块的所有方法都重新定义 Mock 实现。第二步配置映射关系在 Mock 配置文件src/mock/mock-config.json5中定义目标模块与 Mock 实现的替换关系。该替换关系会在预览场景下生效。{ ohos.measure: { // 待替换的moduleName source: src/mock/MeasureText.mock.ets // Mock代码的路径相对于模块根目录 }, }第三步验证 Mock 是否生效在原调用处中添加Hilog 日志方便在预览时在 Log 中打印获取返回值从而验证 Mock 是否生效。hilog.debug(DomainNumber, logTag, Mock %{public}s, ${MeasureText.measureText({textContent: Hello World})});场景二本地模块第一步新建 Mock 文件在src/mock目录下新建一个 ArkTS 文件在这个文件内定义目标模块的 Mock 实现。// src/mock/module/utils/CommonUtils.mock.ets // 导入本地模块 import LibDefaultExport from ../../../main/ets/utils/CommonUtils; // get origin default export import { methodA, ObjectB } from ../../../main/ets/utils/CommonUtils; // get origin export on demand class DefaultExportMock extends LibDefaultExport { // 定义mock实现 public static getName(): String { return Mocked Name; } }; // Mock methodA方法 export const methodAMock (): string { return methodA Mocked } export { methodAMock as methodA, ObjectB, } export default DefaultExportMock;原始文件CommonUtils.ets示例export default class CommonUtils { public static getName(): String { return origin name; } public static getTitle(): String { return origin title; } } export const methodA (): string { return methodA } export const ObjectB: Object new Object();说明本地模块的 Mock 仅支持src/main/ets目录下的 ArkTS 或 TS 文件。第二步配置映射关系在 Mock 配置文件src/mock/mock-config.json5中定义目标模块与 Mock 实现的替换关系。该替换关系会在预览场景下生效。{ utils/CommonUtils.ets: { // 本地模块只支持ets/xxx的相对路径并需明确文件后缀 source: src/mock/module/utils/CommonUtils.mock.ets }, }第三步验证 Mock 是否生效在原调用处中添加 Hilog 日志方便在预览时在 Log 中打印获取返回值从而验证 Mock 是否生效。hilog.debug(DomainNumber, logTag, Mock %{public}s, CommonUtils.getName());五、使用方式对比对比项UI 组件方法 MockUI 组件属性 Mock模块 Mock装饰器MockSetupMockSetup无配置文件驱动引入方式import { MockKit, when, MockSetup }import { MockSetup }import ... from目标模块实现方式MockKit.mockFuncwhen(...).afterReturn(...)直接重新赋值属性继承 extends 重写方法配置文件无无src/mock/mock-config.json5映射关系无无目标模块 ↔ Mock 文件一对一触发时机预览时组件初始化先于aboutToAppear同左预览运行时所有 import 指向 Mock支持范围声明式范式组件声明式范式组件系统模块、依赖模块、本地模块