前端后端Web框架【免费下载链接】modern.jsA progressive web framework based on React and Rsbuild.项目地址https://gitcode.com/gh_mirrors/mo/modern.js点击查看免费下载本篇文章基于仓库中的 tests/e2e/builder/README.md 展开。该目录承载着 Modern.js Builder 的端到端E2E测试用例集以 Playwright 为测试框架覆盖开发服务器、HTML 生成、产物输出、源码编译、性能优化、安全特性等核心构建能力。读完本文你将掌握该测试体系的目录组织方式、两种常用运行命令、共享测试基建的底层实现以及如何参照现有用例编写新的 E2E 测试。一、目录定位Builder 的端到端质量防线Modern.js 是一个基于 React 与 Rsbuild 的渐进式 Web 框架而 Modern.js Builder 是其底层构建引擎能力的提供者。tests/e2e/builder包名为e2e/builder见 package.json正是围绕这一引擎建立的端到端测试目录它不再像单元测试那样只验证某个函数或模块而是真实地创建 Builder 实例、执行完整的开发/构建流程、启动静态服务器再用浏览器访问产物页面从用户视角验证最终结果是否符合预期。从目录结构看该测试体系由三部分协作构成cases/按构建能力维度划分的测试用例集每个子目录通常包含一个*.test.ts文件与配套的fixtures/或内联src/示例工程scripts/测试共享基建包括 shared.ts 与 static.ts配置文件playwright.config.ts、tsconfig.json 与 package.json。二、技术栈与运行命令README 明确指出本目录使用 Playwright 作为 E2E 测试框架依赖版本为playwright/test1.64.0见 package.json。运行全部用例pnpm run test该命令实际执行的是playwright test见 package.json 中test: playwright test由 Playwright Test Runner 自动扫描cases/下所有*.test.ts用例并串行/并行执行。运行指定用例# 运行名中包含 css 的测试用例 pnpm run test csspnpm run test css会把css作为过滤条件传给 Playwright仅执行测试标题或文件名中匹配该关键字的用例适合在调试某个具体功能时快速定位。CI 环境下的浏览器策略playwright.config.ts 中有一个值得注意的细节测试默认使用 Playwright 自带浏览器但当环境变量CI存在时会通过channel: chrome切换到本机 Chrome以加快 CI 上的测试速度import { defineConfig } from playwright/test; const isCI Boolean(process.env.CI); export default defineConfig({ use: { // Use the built-in Chrome browser to speed up CI tests channel: isCI ? chrome : undefined, }, });三、用例组织cases/ 目录按构建能力分域cases/下每个子目录聚焦一个构建能力域遵循一个测试文件 若干 fixtures 示例工程的组织惯例。fixtures 是缩略版的真实应用含src/、tsconfig.json甚至static/资源保证被测场景贴近真实项目。目前覆盖的能力域包括能力域测试入口覆盖内容开发服务器dev/dev.test.ts、dev/write-to-disk.test.tsHMR、dev.port、dev.https、dev.writeToDisk、tools.devServerHTML 生成html/html.test.ts、html/minify/index.test.tshtml.mountId、html.title、html.meta、html.inject、html.favicon、outputStructure、模板压缩产物输出output/output.test.ts、output/assets.test.ts、output/ascii/index.test.tsoutput.distPath、output.copy、cleanDistPath、sourceMap、dataUriLimit、charset资源重试output/assets-retry/index.test.tsoutput.assetsRetry的内联/外链两种形态源码编译source/source.test.tssource.alias、preEntry、globalVars、define、tsconfig paths 与 alias 的优先级性能优化performance/performance.test.ts、performance/removeConsole.test.tssplitChunks预设、preconnect、dnsPrefetch、removeConsole语法检查check-syntax/index.test.tssecurity.checkSyntax的targets、ecmaVersion、exclude安全特性sri/index.test.tssecurity.sri为 JS/CSS 注入integritySource Mapsource-map/source.test.ts使用source-map库还原产物位置到源码位置运行时内联inline-chunk/index.test.tsdisableInlineRuntimeChunk、inlineScripts、inlineStyles其他能力wasm/index.test.ts、web-worker/index.test.ts、node-addons/index.test.ts、polyfill/index.test.ts、manifest/index.test.ts、inspect-config/index.test.tswasm 引入、web-worker target、Node 原生插件、polyfill、资源清单、配置检查说明目录中还存在css相关的 fixtures 与配置README 也以css作为运行指定用例的示例关键词因此pnpm run test css可命中与 CSS 相关的用例。四、共享测试基建scripts/shared.ts 深度拆解所有用例都会从scripts/shared路径别名见 tsconfig.json引入共享工具。理解这些工具就理解了整个测试体系的运行原理。4.1 createBuilder创建被测实例export const createBuilder async ( builderOptions: CreateBuilderOptions, builderConfig: BuilderConfig {}, ) { const { createBuilder } await import(modern-js/builder); const builder await createBuilder({ ...builderOptions, bundlerType: rspack, config: builderConfig, }); return builder; };它固定以rspack作为 bundler 类型源码见 scripts/shared.ts将业务配置BuilderConfig注入 Builder。注意这里使用的是动态import体现了对包体积与加载时机的考量。4.2 updateConfigForTest测试环境下的配置默认值该函数scripts/shared.ts为每个用例注入了一组面向测试的默认配置核心意图是让测试更快、更稳config.dev.progressBar false关闭进度条减少终端噪音config.performance.buildCache false默认关闭构建缓存保证每次构建从零开始、结果可复现config.performance.printFileSize false不打印产物体积config.output.disableTsChecker true除非显式配置跳过 TS 类型检查以加速测试config.output.polyfill off未显式配置时关闭 polyfill聚焦被测能力本身。4.3 build 与 dev生产构建与开发服务器的统一封装build()scripts/shared.ts执行生产构建并返回一组实用句柄return { distPath, // 产物目录 port, // runServer 为 true 时静态服务器的端口 clean, // 清理产物目录 close, // 关闭静态服务器 unwrapOutputJSON, // 将产物文件读取为 { 路径: 内容 } 的 JSON getIndexFile, // 取出入口 index.js 的内容与体积KB instance: builder, };其中runServer: true时会调用runStaticServer启动静态服务器配合getHrefByEntryName(main, builder.port)生成页面访问地址export const getHrefByEntryName (entryName: string, port: number) { const baseUrl new URL(http://localhost:${port}); const htmlRoot new URL(html/, baseUrl); return new URL(${entryName}/index.html, htmlRoot).href; };可见产物目录采用html/entryName/index.html的嵌套结构。unwrapOutputJSON内部通过globby扫描产物目录并批量读取文件内容默认忽略*.map文件且超过maxSize默认 4096 KB即抛错防止断言时误读超大文件scripts/shared.ts。dev()scripts/shared.ts则设置NODE_ENVdevelopment后调用builder.startDevServer()并通过一个内联 Rsbuild 插件强制server.middlewareMode: false确保以完整 dev server 形态运行。4.4 端口与静态服务器getRandomPort()在15000 ~ 45000之间随机探测可用端口并登记占用。源码注释明确说明了范围选择的工程原因macOS CI 上10080不可用Windows 上 50000会触发permission deniedscripts/shared.ts。runStaticServer(root)基于connectserve-static中间件见 static.ts启动静态文件服务器默认绑定127.0.0.1。4.5 proxyConsole拦截控制台输出export const proxyConsole ( types: ConsoleType | ConsoleType[] [log, warn, info, error], ) { /* 替换 console 方法并收集日志 */ };proxyConsole临时替换console的指定方法并收集日志返回{ logs, restore }。这在checkSyntax等预期构建失败的用例中非常关键——用expect(build(...)).rejects.toThrowError(incompatible syntax)断言错误同时用 proxyConsole 收敛预期的错误日志避免污染测试输出见 check-syntax/index.test.ts。五、典型案例解读从断言看 Builder 行为5.1 HMR改一行代码验证热更新dev/dev.test.ts 展示了完整的 HMR 链路先复制 fixture 源码启动 dev server 后访问页面并断言文本Hello Builder!与颜色样式然后改写App.tsx与App.css等待热更新生效再断言页面文本与颜色随之变化。这个用例同时验证了 JS HMR 与 CSS HMR。测试末尾会恢复源码并builder.server.close()保持 fixture 干净。该用例注释明确说明 HMR 测试在 CI 中会超时因此以test.skip标记。5.2 产物结构distPath 与 cleanDistPath 的行为output/output.test.ts 中的用例在构建前先向目标目录写入一个test.json然后验证默认cleanDistPath启用时构建后该文件被清除显式cleanDistPath: false时旧文件得以保留distPath: { root: dist-1, js: aa/js }会把 HTML 输出到dist-1/html/main/index.htmlJS 输出到dist-1/aa/js证明 root 与 js 子路径可分别定制。5.3 资源内联阈值dataUriLimit 与特殊命名output/assets.test.ts 用一组参数化用例验证资源处理策略默认配置下小图片以data:image/png内联dataUriLimit: { image: 0 }时改为输出 URLstatic/image/icon注释提示 Rspack 不支持Infinity因此用5 * 1024模拟不设上限。此外assets-url、assets__inline、assets-inline等 fixture 目录名本身即代表资源后缀约定?url、?inline可见 Builder 支持通过 import 后缀强制指定资源处理方式。5.4 Source Map 可追溯性source-map/source.test.ts 直接引入source-map库对产物中Hello Builder!与window.aa的位置做originalPositionFor反查断言其精确映射到src/App.jsx第 2 行第 24 列与src/index.js第 5 行第 0 列。这从测试层面证明了 Builder 产出的 Source Map 是逐列精确的。5.5 运行时 chunk 内联策略inline-chunk/index.test.ts 验证了 Builder 运行时 chunk 的处理策略默认情况下运行时被内联进 HTML产物中没有独立 runtime 文件但 HTML 中包含Loading chunk片段disableInlineRuntimeChunk: true时产物中出现独立的 builder runtime 文件还覆盖了inlineScripts/inlineStyles支持正则与({ size, name }) boolean函数两种形态以及 hidden-source-map 下不输出 runtime 的 source map。5.6 语法兼容性检查check-syntax/index.test.ts 围绕security.checkSyntax设计了四组对照目标浏览器较旧且存在不兼容语法时构建失败并抛出incompatible syntax通过checkSyntax.exclude: /src\/test/排除指定文件后构建通过目标为chrome 60时 ES6 语法可通过可选链语法在chrome 53下报错但显式指定ecmaVersion: 2020后通过。5.7 静态资源形态验证sri/index.test.ts 开启security.sri后断言 HTML 中至少出现 2 处integrity对应 JS 与 CSS 各一wasm/index.test.ts 验证 wasm 产物落在static/wasm/*.module.wasm且支持直接 import、动态 import 与new URL三种引入方式node-addons/index.test.ts 验证.node原生插件在output.target: node下被正确拷贝到bundles/。六、配置检查与调试辅助inspectConfiginspect-config/index.test.ts 验证了builder.inspectConfig({ writeToDisk: true })的能力它会在dist/.rsbuild/下生成rsbuild.config.mjs与rspack.config.web.mjs等中间配置产物方便开发者审查 Builder 实际生成的最终配置当存在 client/server 多 environment 时还会分别生成*.client.mjs与*.server.mjs。writeToDisk: false时则不落盘。这是排查构建问题、理解配置合并结果的有力手段。七、如何新增一个 E2E 测试用例参照现有惯例新增用例的步骤是创建用例目录与 fixture在tests/e2e/builder/cases/下按能力域新建目录如cases/your-feature/放入最小可运行的应用源码src/index.js、tsconfig.json等编写测试文件创建feature.test.ts从scripts/shared引入build、dev、getHrefByEntryName等工具用 Playwright 的test与expect编写断言注入被测配置通过builderConfig传入要验证的BuilderConfig片段如html.title、output.distPath测试基建会自动叠加 4.2 节中的测试默认值验证产物或页面静态产物层面的行为用builder.unwrapOutputJSON()断言浏览器运行时行为用page.goto(getHrefByEntryName(main, builder.port))后操作 DOM 断言清理资源test.afterAll中调用builder.close()需要清理产物时调用builder.clean()运行验证先pnpm run test 你的关键词单独调试全部通过后再跑完整的pnpm run test。八、小结e2e/builder是 Modern.js Builder 面向真实构建链路的质量屏障。它以 Playwright 为执行引擎通过共享基建 能力分域用例 最小 fixture 工程的组织方式把开发服务器、HTML、产物、源码编译、性能与安全等能力逐项验证到位。两条命令pnpm run test与pnpm run test keyword分别对应全量与定向回归而scripts/shared.ts中的build、dev、unwrapOutputJSON、getHrefByEntryName等工具则统一了构建 - 起服务 - 断言产物 - 验证页面的完整测试范式。对于希望深入理解 Builder 行为或为其贡献测试的开发者而言这份目录既是使用手册也是可运行的范例库。赞分享前端后端Web框架【免费下载链接】modern.jsA progressive web framework based on React and Rsbuild.项目地址https://gitcode.com/gh_mirrors/mo/modern.js点击查看免费下载相关推荐Modern.js 与 Playwright搭建 React 应用的端到端E2E测试示例Modern.js 与 Playwright搭建 React 应用的端到端E2E测试示例 本篇技术指南以 Modern.js 仓库中的 test play前端后端Web框架Carbon 端到端测试E2E运行指南从命令到 Playwright 与 AVT 无障碍测试体系Carbon 端到端测试E2E运行指南从命令到 Playwright 与 AVT 无障碍测试体系 本文以 e2e/README.md https://li前端UI组件设计系统Mailtrain 端到端E2E测试完全指南环境搭建、测试运行与用例编写Mailtrain 端到端E2E测试完全指南环境搭建、测试运行与用例编写 Mailtrain 是一个自托管的邮件订阅newsletter应用其服务端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考