RedwoodJS 测试入门实战：用 `yarn rw test` 跑通第一个测试套件

后端前端Web框架开发工具【免费下载链接】redwoodRedwoodGraphQL项目地址https://gitcode.com/gh_mirrors/re/redwood点击查看免费下载RedwoodJS 是一个全栈 JavaScript/TypeScript Web 框架将 React 前端、GraphQL API 与 Prisma 数据库层整合在一起。本教程基于官方 v3 系列文档的「测试入门」Introduction to Testing章节讲解如何启动yarn rw test测试命令、理解 Jest 的 watch 工作模式、解决常见的TEST_DATABASE_URL配置问题并接续教程第 5 章逐步写出组件、Cell、Service 的测试。读完本文你将能独立运行 Redwood 测试套件、看懂测试输出并知道下一步应该往哪些方向深化测试能力。一、运行你的第一个测试套件如果你一直跟着教程开发到第 5 章前四章完成了博客的页面、组件、Cell 与评论表单现在该确认一下整个应用没有因为之前的改动而悄悄坏掉。测试套件可以在开发服务器运行的同时另开一个终端窗口执行yarn rw test这个test命令启动的是一个持久化进程它会持续监听文件变化只要相关文件组件本身或其对应的测试文件发生改动就会自动重新运行与之关联的测试。也就是说你不用每次改完代码都手动重新执行命令Jest 会替你盯着文件系统。在 watch 模式下使用交互快捷键刚启动套件时由于还没有任何文件被改动可能一个测试都不会真正运行。此时可以在交互界面里敲a让 Jest 运行**全部all**测试。运行结束后终端底部会显示汇总信息例如某次运行有 1 个测试失败向上滚动终端即可查看失败测试的详细堆栈。跑完全部测试后如果想切回只针对改动文件运行测试的默认模式按oonly changed files即可也可以直接退出并重新执行yarn rw test。为什么教程里第一次跑测试会失败因为第 1~4 章我们对生成出来的页面、组件和 Cell 做了大量修改却没有同步更新对应的测试。这是继续自己维护代码库时的常见现象也正是教程强烈推荐在中场休息Intermission章节里改用示例仓库继续的原因——示例仓库自带一套完整的初始测试。实战目标让左侧一列全绿理想状态下测试输出的左列通过/失败状态应该全部为绿色、没有任何失败项。社区最佳实践甚至主张只要本地测试套件没有通过就不应该把代码提交进仓库。虽然并非所有人都严格执行这条纪律但把它当作自己的标准能避免把坏改动带到团队或生产环境。二、常见坑Prisma 数据源校验错误P1012如果你是从教程前半部分一路沿用自己代码库的读者运行yarn rw test时大概率会遇到下面的报错yarn rw test Error: Get config: Schema Parsing P1012 error: Error validating datasource db: the URL must start with the protocol postgresql:// or postgres://. -- schema.prisma:3 | 2 | provider postgresql 3 | url env(DATABASE_URL) | Validation Error Count: 1 error Command failed with exit code 1.这个错误的根源在于教程后半部分部署章节把数据库切换成了 PostgreSQLschema.prisma中数据源的provider改成了postgresql而测试环境读不到合法的连接串。解决办法是在项目根目录的.env文件中新增一行让测试环境使用与开发环境相同的数据库连接TEST_DATABASE_URLthe same url as DATABASE_URL从 Redwood 测试基础设施的实现来看这一行为并非巧合测试命令在启动 Jest 时会把环境变量DATABASE_URL显式设置为TEST_DATABASE_URL的值如果该变量未定义则回退到生成目录下的test.db参见 testHandler.js。因此.env里有没有TEST_DATABASE_URL直接决定了 api 侧测试能否启动。三、yarn rw test底层做了什么理解了命令行为之后再看一眼源码会让一切更清晰。test命令的处理器位于 packages/cli/src/commands/testHandler.js它的核心流程是解析参数区分出web/api这类 side 参数与真正的 Jest 过滤参数filter并转发用户传入的其他 Jest flag如--coverage注入环境变量DATABASE_URL process.env.TEST_DATABASE_URL || file:.../test.db保证 api 测试跑在独立的测试数据库上判定 watch 模式默认开启 watch如果处于 CI 环境或要求收集覆盖率则关闭 watch在 Git/Mercurial 仓库中会使用--watch否则退化为--watchAll指定测试项目没有显式指定 side 时默认对web与api两侧都运行通过 Jest 的--projects web api参数调用 Jest通过execa以yarn jest方式执行并校验各 side 的jest.config.js是否存在。api 侧的 Jest 预设jest-preset.js还额外做了几件事测试环境使用自定义的RedwoodApiJestEnv、启动前通过globalSetup执行数据库同步默认prisma db push详见下文测试数据库、并自动把redwoodjs/testing映射到 api 侧实现避免 web 侧的东西泄漏进 api 测试。四、把测试补到全绿一个真实的修复案例教程第 5 章在给Article组件增加summary摘要功能后ArticlesCell的测试立刻红了组件只渲染正文前 100 个字符加省略号而旧测试还在查找完整正文自然找不到。修复思路是把组件当作黑盒只验证我们能合理推断的行为——完整正文不应该出现、正文开头若干字符应该出现、且结尾带有...。最终在 first-test.md 中给出的测试片段如下import { render, screen, within } from redwoodjs/testing import { Loading, Empty, Failure, Success } from ./ArticlesCell import { standard } from ./ArticlesCell.mock describe(ArticlesCell, () { // Loading / Empty / Failure 测试略... test(Success renders successfully, async () { const articles standard().articles render(Success articles{articles} /) articles.forEach((article) { const truncatedBody article.body.substring(0, 10) const matchedBody screen.getByText(truncatedBody, { exact: false }) const ellipsis within(matchedBody).getByText(..., { exact: false }) expect(screen.getByText(article.title)).toBeInTheDocument() expect(screen.queryByText(article.body)).not.toBeInTheDocument() expect(matchedBody).toBeInTheDocument() expect(ellipsis).toBeInTheDocument() }) }) })几个关键点getByText()在找不到文本时会抛错适合断言必须存在queryByText()找不到时返回null是断言文本不应该存在的标准手段{ exact: false }允许做子串匹配因为页面上正文不止这 10 个字符within(matchedBody)把查询范围限定在已找到的元素内部用于定位省略号保存文件后 Jest 会自动重跑如果你想验证测试确实有效可以把ArticlesCell.js里的summary{true}去掉测试应当立刻失败。**验证测试的有效性**是测试写作中常被忽略的一环让测试先失败一次确认它确实在检验你预期的行为再改回代码让测试恢复绿色。五、测试数据的来源Mock 与standard()你可能已经注意到测试中的文章数据并非来自开发数据库而是来自与组件同级的.mock.js文件。这是 Redwood Cell 测试的关键机制export const standard () ({ articles: [ { id: 1, title: First Post, body: Neutra tacos hot chicken prism raw denim..., createdAt: 2020-01-01T12:34:56Z, }, ], })standard()是约定俗成的默认 mock 名生成器会为你创建它mock 的顶层 key如articles与 Cell 中Success组件的 props 一一对应在测试或 Storybook 故事中可以用展开语法Success {...standard()} /或显式standard().articles传入可以定义任意多个命名 mock如missingBody在测试里按需导入。Redwood 拦截 GraphQL 请求并返回 mock 数据的实现位于 packages/testing/src/web/mockRequests.tsmockGraphQLQuery/mockGraphQLMutation会注册 MSWMock Service Worker请求处理器未启动的服务会先把 handler 放入队列、启动后再排空。这也解释了为什么你可以在render()之前调用这些 mock 函数。需要特别留意Redwood 并不校验 mock 返回的数据结构与 Cell 中QUERY的返回结构是否一致。mock 返回article而查询animal测试照样能过。因此一旦你大改QUERY务必同步修改 mock否则可能出现假绿的测试。六、测试体系全景Redwood 的测试技术栈第 5 章只是测试世界的入口。Redwood 的完整测试体系以几大开源库为基础并做了深度封装JestRedwood 的测试运行器test runner。yarn rw test默认启动 watch 模式监听文件变化并自动重跑相关测试React Testing Library在隔离环境中渲染单个组件并断言期望的文本或 HTML 结构是否出现。Redwood 的render是对它的封装额外注入了 auth、GraphQL client、router 等 mock providersMock Service Workermsw拦截网络请求。web 侧组件发起的 GraphQL 调用在测试中并不会真正打到 api 服务器而是被 MSW 拦截并返回你预设的罐头响应测试更快也更稳定Storybook严格来说不是测试工具但可以作为 UI 的人工冒烟检查尤其适合肉眼检查排版、图片、动画这类自动化成本极高的部分Redwood Generators每次生成 Component、Page、Cell、Service都会自动附带基础测试文件为你铺好测试的起点。更系统的概念梳理术语表、从零手写测试运行器等可以参考完整版 Testing 文档它包含术语定义测试 / 断言 / 被测对象 / 测试套件 / 覆盖率等并手把手教你用纯 JavaScript 实现一个迷你测试框架来理解 Jest 的原理。常用测试命令速查# 运行全部测试watch 模式默认 yarn rw test # 运行一次、不进入 watch提交前或部署前用 yarn rw test --no-watch # 只跑 web 侧 yarn rw test web # 只跑 api 侧 yarn rw test api # 只跑文件名匹配 CommentForm 的测试 yarn rw test CommentForm # 组合api 侧 文件名含 Comment yarn rw test api Comment侧过滤与文件名过滤可以自由组合配合--no-watch在提交代码或部署前做一次完整回归是官方推荐的用法。七、下一站从入门到完整的测试矩阵第 5 章之后你可以沿以下主线继续深化组件测试进阶getByRole/queryByRole基于 ARIA role 查询、findByText等待异步渲染、toHaveAttribute校验href等属性以及使用testing-library/user-event模拟真实用户交互来测试表单GraphQL MockingmockGraphQLQuery(getArticle, (variables, { ctx }) ...)支持读取查询变量也能用ctx.errors([...])模拟 GraphQL 报错进而测试Failure分支Mocking Authweb 与 api 两侧都有mockCurrentUser()。传入{ roles: [admin] }可以一并模拟hasRole()的行为测试中currentUser的解析是异步的需要借助findBy*或waitFor自定义 Hooks用renderHook测试useAccumulator这类自定义 Hookresult.current读取返回值、rerender更新 props 后重新渲染Cells 测试一个 Cell 可导出Loading / Empty / Failure / Success四个组件生成器会为每个都生成不抛错即通过的冒烟测试嵌入 Cell 的页面在测试时会自动用该 Cell 的standard()mock 拦截其 GraphQL 查询Service 测试与测试数据库api 侧测试默认使用独立的测试数据库TEST_DATABASE_URL未设置时回退到.redwood/test.db启动时自动执行prisma db push同步 schema若你的迁移包含必须顺序执行的自定义 SQL可在.env中设置TEST_DATABASE_STRATEGYreset改用prisma migrate resetScenarios场景数据Service 测试的种子数据机制。用defineScenario()定义standard或命名场景测试函数从it()换成scenario()通过scenario.user.dom.id引用已插入数据库的真实记录含数据库分配的id与默认值还支持多模型、嵌套关系创建与以函数形式引用已建记录利用 ES2015 对象键创建顺序等高级用法函数 / Webhooks / 指令 / 缓存测试Redwood 提供了免启动 dev server 的函数与 Webhook 测试工具以及针对缓存服务的toHaveCached自定义 matcher 和partialMatch辅助函数。这些进阶主题在完整版 Testing 文档中均有对应章节配合第 6 章评论功能可以边写功能边补测试让先红后绿的节奏贯穿整个开发过程。结语从yarn rw test启动第一个 watch 进程到用TEST_DATABASE_URL修掉 Prisma 报错再到读懂 Mock、Scenarios 与 GraphQL 拦截机制你已经掌握了 RedwoodJS 测试的最小闭环。记住两条心法先让测试失败一次来验证它确实有效以及测试套件全绿再提交代码。带着这两条心法进入第 6 章的评论功能开发测试会从负担变成你最可靠的安全网。赞分享后端前端Web框架开发工具【免费下载链接】redwoodRedwoodGraphQL项目地址https://gitcode.com/gh_mirrors/re/redwood点击查看免费下载相关推荐RedwoodJS 测试入门运行 yarn rw test 测试套件与修复 TEST_DATABASE_URL 配置错误RedwoodJS 测试入门运行 yarn rw test 测试套件与修复 TEST_DATABASE_URL 配置错误 本文是 RedwoodJS 教程第五后端前端Web框架开发工具我的第一个测试RedwoodJS 中 Cell 与组件测试的完整实战指南我的第一个测试RedwoodJS 中 Cell 与组件测试的完整实战指南 导读 当 Storybook 帮我们完成了组件长什么样的第一阶段验证后第二阶段后端前端Web框架开发工具修改 rustc 源码后如何用 ./x test 只跑 UI 测试套件与单个测试文件修改 rustc 源码后如何用 ./x test 只跑 UI 测试套件与单个测试文件 改完 rustc 源码之后第一件事通常是验证改动没有破坏编译器的行为。直编程语言编译器语言运行时标准库创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考