Neptune Mutual前端测试体系：Jest + Testing Library保障DApp质量的完整实践

Neptune Mutual前端测试体系Jest Testing Library保障DApp质量的完整实践【免费下载链接】app.neptunemutual.com An open source interface for the Neptune Mutual App项目地址: https://gitcode.com/gh_mirrors/ap/app.neptunemutual.comNeptune Mutual 是一个开源的去中心化再保险协议DApp前端应用其测试体系基于Jest 28 React Testing Library jsdom构建覆盖页面、组件、Hook 三大层级并针对 Web3 场景做了钱包、路由、API 的全面 Mock 方案是 DApp 前端测试的一个完整可参考实践。一、为什么 DApp 前端测试更难普通 Web 应用测试已经不容易DApp 还要额外面对三类浏览器外依赖钱包连接MetaMask 注入的window.ethereum对象区块链路由Next.js 的useRouter链上数据 APISubgraph、协议节点返回的异步数据。Neptune Mutual 的做法是把这三类依赖统一收口到src/utils/unit-tests/工具目录让业务测试文件保持干净。二、Jest 配置一份 next/jest 解决所有编译问题 核心配置文件jest.config.js关键设计点如下配置项值作用testEnvironmentjsdom模拟浏览器 DOM 环境transformbabel-jest next/babel正确转译 JSX 与 Next.js 语法setupFilesAfterEachjest.setup.js注入 jest-dom 断言扩展moduleNameMapper/common、/modules等与 Next.js 别名保持一致其中moduleNameMapper把样式文件与图片统一重定向到 Mockcss/sass/scss → __mocks__/styleMock.js png/jpg/svg... → __mocks__/fileMock.js配合__mocks__/lingui/macro.js对国际化宏的 Mocki18n 代码在测试中不再报错。 全局初始化只有两行位于 jest.setup.jsimport testing-library/jest-dom/extend-expect jest.setTimeout(90 * 1000)jest-dom提供了toBeInTheDocument()这类自然语言断言90 秒超时则是为了容忍异步链上数据 Mock 的等待。三、测试目录镜像源码的影子结构测试代码位于独立的__tests__/目录按src/pages的页面路由结构镜像组织__tests__/src/pages/ ├── covers/ # 保险标的Cover相关页面 ├── my-liquidity/ # 我的流动性 ├── my-policies/ # 我的保单含理赔 claim 流程 ├── pools/ # 流动性池、质押 ├── reports/ # 事故报告与争议流程 └── index.test.js # 首页以首页测试__tests__/src/pages/index.test.js为例它只关心页面能渲染出首页容器这一件事复杂的 home 模块被jest.mock替换为一个静态data-testid节点——这正是 Testing Library测试行为而非实现的典型用法。四、DApp 专属 Mock 层测试体系的核心亮点 全局环境 Mocksrc/utils/unit-tests/test-utils.jsx这个文件一次性补齐了 jsdom 缺失的 DApp 运行时环境window.ethereumMock 了enable、request、eth_chainId、eth_requestAccounts等 MetaMask 方法返回固定的测试地址localStorage用内存对象替换避免 jsdom 持久化副作用Provider 封装withProviders/withDataProviders把I18nProvider、Web3ReactProvider、ToastProvider、NetworkProvider、TxPosterProvider等应用级 Context 打包成现成的包装器测试一行代码即可获得完整应用上下文。 数据与 Hook Mocksrc/utils/unit-tests/mock-hooks-and-methods.js该文件集中导出了useAuth、usePurchasePolicy、useReportIncident、useSubgraphFetch等几十个业务 Hook 的 Mock 函数。测试时只需mockHooksOrMethods.useRouter()即可将对应 Hook 替换为可控返回值从而把链上状态变成确定性的测试输入。再配合createMockData.js、test-data.js中的固定数据集保证每次运行结果一致。 渲染入口src/utils/unit-tests/helpers.jsinitiateTest(Component)返回initialRender/rerenderFn内部自动完成三件事清理上一轮 DOM、激活英文语言包i18n.activate(en)、按 Testing Library 规范渲染组件。所有测试因此共享同一套渲染协议。五、如何运行测试 脚本定义在 package.json 的 scripts 中命令用途yarn test完整运行并输出覆盖率报告jest --coverageyarn test:watch开发时监听模式jest --watchNode/Yarn 版本由volta字段锁定为 Node 18.12.0 / Yarn 1.22.19克隆仓库后本地环境完全一致git clone https://gitcode.com/gh_mirrors/ap/app.neptunemutual.com cd app.neptunemutual.com yarn install yarn test六、这套体系给 DApp 开发者的 5 点启示用 next/jest 起步让 JSX、CSS Modules、资源导入零配置可用全局环境补丁集中管理ethereum、localStorage、crypto避免每个测试重复打补丁Provider 包装器把 React Context 依赖封装成一行调用是测试复杂应用上下文的关键技巧Mock 数据与 Hook 分离存放业务测试只写断言可读性接近普通 Web 项目镜像式目录 页面级冒烟测试能在路由重构时第一时间发现断链。 相关模块入口src/utils/unit-tests/测试工具、__mocks__/全局 Mock、__tests__/src/全部测试用例Neptune Mutual 的这套 Jest Testing Library 实践证明即使面对钱包、链上数据等强外部依赖DApp 前端依然可以建立一套确定性、可重复、易读的自动化测试体系。对正在构建 DApp 的开发者来说上述目录结构、Mock 分层与 Provider 封装方案可以直接作为模板落地。【免费下载链接】app.neptunemutual.com An open source interface for the Neptune Mutual App项目地址: https://gitcode.com/gh_mirrors/ap/app.neptunemutual.com创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考