boot-react 如何做全栈测试Spock Enzyme jsdom 双端测试栈完全指南【免费下载链接】boot-reactA starter application with spring boot and react项目地址: https://gitcode.com/gh_mirrors/bo/boot-reactboot-react 是一个基于 Spring Boot React 的全栈启动模板内置了完整的双端测试体系后端用Spock 框架验证 REST 接口与安全策略前端用Enzyme jsdom Mocha对 React 组件做单元测试。本文将带你从零看懂这套全栈测试栈的运行原理、目录结构和执行方法新手也能快速上手。 双端测试栈全景boot-react 如何组织测试boot-react 采用前后端分离的测试策略两端各自独立、互不依赖端测试框架测试对象目录位置后端JavaSpock Spring Security TestREST 接口、登录鉴权backend/src/test/groovy/react/前端JSMocha Enzyme jsdom expectReact 组件、路由守卫frontend/test/这种“各管一段”的设计让开发者可以用自己熟悉的语言写测试Java 工程师写 Groovy 风格的 Spock 规格前端工程师写 JS 的 BDD 用例两端都能在 CI 中独立跑通。 后端测试用 Spock 快速验证 Spring Boot 接口1. 继承 AbstractMvcSpec统一 MockMvc 配置所有后端测试类都继承同一个抽象基类AbstractMvcSpec它完成了三件关键事情通过ContextConfiguration加载完整 Spring 上下文BootReactApplication通过ActiveProfiles(test)激活测试专用配置重写buildMockMvc注入 Spring Security 过滤器和内存版SessionRepositoryFilter——会话直接存在内存 Map 里测试时无需启动 RedisContextConfiguration( loader SpringApplicationContextLoader, classes [BootReactApplication] ) ActiveProfiles(test) abstract class AbstractMvcSpec extends SpockMvcSpec { Shared private def sessionRepository new MapSessionRepository() // ... 构建带 Spring Security 的 MockMvc }对应文件backend/src/test/groovy/react/AbstractMvcSpec.groovy2. 一个 Stepwise 写完整登录流程Spock 的Stepwise注解让多个测试方法按声明顺序共享状态非常适合测试“登录 → 取会话 → 登出”这种有状态流程Stepwise class AuthenticationResourceSpec extends AbstractMvcSpec { Shared String token def bad authentication() { when: def res post(/api/session, [username: user, password: badpassword]) then: res.status HttpStatus.UNAUTHORIZED } def good authentication() { when: def res post(/api/session, [username: user, password: password]) token res.json.token then: res.status HttpStatus.OK } // 后续方法直接复用 token 验证 get/delete session }对应文件backend/src/test/groovy/react/api/AuthenticationResourceSpec.groovy只需post、get、delete三个动词方法即可完成 HTTP 调用、JSON 解析和状态码断言——这就是 Spock MVC 扩展spockmvc.SpockMvcSpec的强大之处。3. 用 WithMockUser 验证 Spring Security 权限验证“未登录 403、已登录 200”这类权限逻辑不需要真的登录一行注解即可def unauthenticated users cannot get resource() { when: def res get(/api/simple) then: res.status HttpStatus.FORBIDDEN } WithMockUser def authenticated users can get resource() { when: def res get(/api/simple) then: res.status HttpStatus.OK }对应文件backend/src/test/groovy/react/auth/AuthenticationSpec.groovy⚛️ 前端测试Enzyme jsdom 测试 React 组件1. mocha.opts 一键配置测试环境前端测试命令在 package.json 中定义cross-env NODE_ENVtest mocha。Mocha 的默认行为由frontend/test/mocha.opts控制-u bdd --recursive --full-trace --reporter spec --require babel-core/register关键在最后一行babel-core/register让 Mocha 在 Node 环境下也能运行 JSX 和 ES6 语法无需额外转译步骤。2. shallow 与 mount两种渲染方式的取舍boot-react 的组件测试同时演示了 Enzyme 的两种渲染方式shallow浅渲染只渲染组件自身不触碰子组件。ListComponent.spec.js用它验证“渲染 3 个 li”“点击按钮触发 fetchSimple”用createSpy替换 props 即可断言回调速度最快mount完整渲染渲染整棵组件树依赖真实 DOM。LoginForm.spec.js用它模拟输入框change事件和表单submit验证提交时 login 被正确调用const component mount(LoginForm {...props} /); const inputs component.find(input); changeInputValue(inputs.at(0), username, login); component.find(form).simulate(submit); expect(login).toHaveBeenCalledWith(login, password);对应文件frontend/test/components/ListComponent.spec.js、frontend/test/components/LoginForm.spec.js3. describeWithDOM让 jsdom 自动接管 DOMmount 测试需要 DOM 环境boot-react 没有用 Jest而是用一个精巧的小工具函数describeWithDOM解决import jsdom from jsdom-global; export default function describeWithDOM(a, b) { describe((uses jsdom), () { let cleanup; before(() cleanup jsdom()); // 测试前注入全局 DOM describe(a, b); after(() cleanup()); // 测试后清理 }); }对应文件frontend/test/utils/describeWithDOM.js只要mount的测试用describeWithDOM包裹jsdom 就会在before中把window、document挂到全局after中自动清理。纯 shallow 测试如 ListComponent则不需要它。此外frontend/test/components/PrivatePage.spec.js还演示了路由守卫测试给privateRoute包裹的页面传入不同初始状态的 Redux store断言未登录时渲染 loading、登录后渲染页面——这是 React 应用中最容易出 bug 的边界场景之一。 一条命令跑通双端测试拿到代码后git clone https://gitcode.com/gh_mirrors/bo/boot-react运行方式非常直接端命令说明后端./gradlew testGradle 执行所有 Spock 规格前端cd frontend yarn testMocha 递归执行test/下所有.spec.js后端测试基于 MockMvc不启动真实 Web 容器前端测试跑在 Node jsdom 中无需打开浏览器——整套测试在 CI 里几秒钟就能跑完。 新手避坑清单Stepwise有执行顺序依赖方法间通过Shared状态传递如 token单独运行某个方法可能因状态缺失而失败mount 必须配 jsdom忘了用describeWithDOM包裹会报document is not defined浅渲染测行为深渲染测集成纯展示组件优先用shallow涉及子组件交互或路由/Store 的用mount测试不依赖外部服务会话用内存MapSessionRepository代替 Redis接口用 MockMvc 代替真实 HTTP这是 starter 项目能“开箱即测”的关键it.only记得删示例中LoginForm.spec.js保留了调试用的it.only实际开发提交前要移除否则会跳过其他用例总结boot-react 的双端测试栈给全栈项目提供了一个极简但完整的参考后端Spock Spock MVC 扩展Stepwise处理有状态流程WithMockUser处理权限前端Mocha Enzyme 的 shallow/mount 双模式jsdom-global 轻量注入 DOM工程化两端测试均无需外部依赖一条命令跑通对于刚接触全栈测试的开发者照着 README 和本项目的测试目录结构仿写就是最快的学习路径。【免费下载链接】boot-reactA starter application with spring boot and react项目地址: https://gitcode.com/gh_mirrors/bo/boot-react创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考