All Posts in 2023.9 - Dvorak Chen

SEP

React 单元测试

本文介绍了如何使用Vitest、React Testing Library和MSW进行React组件单元测试的完整流程。通过配置测试环境安装必要依赖后，首先演示了基础交互测试方法：通过data-testid属性定位元素模拟点击事件，利用queryByRole验证组件状态变化。针对包含网络请求的场景，使用MSW构建mock服务器拦截HTTP请求，通过beforeAll和afterAll控制mock服务启停，并用waitFor处理异步渲染验证。测试过程中需注意组件残留导致的重复渲染问题，通过afterEach配合cleanup实现测试环境清理。完整示例包含两个测试用例，分别验证点击灰色按钮卸载内容元素和点击黄色按钮触发mock请求的正确行为，最终形成结构化测试代码模板，涵盖依赖导入、mock配置、测试钩子和断言逻辑的完整实现。--Qwen3

SEP

如何开发npm包并使用rollup打包

这篇文章详细解析了如何利用Rollup构建可发布的React组件库并上传至npm，通过实际案例展示了从零到发布的完整流程。文章首先对比了Rollup与Webpack的差异，强调其基于ES6模块的摇树优化特性，能有效压缩代码体积。通过一个包含图片资源的组件示例，揭示了首次发布时因忽略多余文件导致的体积问题，并通过.npmignore文件规范解决了资源冗余问题。在进阶环节中，重点演示了如何通过Rollup配置文件实现多模块格式输出（CJS/ESM），并整合postcss、typescript2等插件处理现代前端开发中的各种资源类型。文章通过三次迭代发布过程，逐步展示了从源码发布到打包压缩的演进路径，最终实现生产环境代码混淆和体积优化。值得注意的是，文中通过两次版本更新的对比，揭示了开发库与生产包的管理差异，提出了如何平衡代码可读性与体积优化的思考。当开发者在选择打包工具时，是否真正理解了不同模块系统的适用场景？当需要同时支持ESM和CJS模块时，又该如何设计输出策略？这些关于构建工具的深层考量，或许正是每个前端开发者在组件库开发中必须面对的抉择。--Qwen3

Javascript npm packages rollup javascript bundling typescript postcss