Storybook 搭建、组件测试与文档工程

共 85 题
#

1. A11Y 插件(axe-core)的自动化测试

A 用 axe-core 自动检测可访问性问题,可集成 CI ✓ 正确答案
B 只能手工
C 无法自动化
D 只测样式
#

2. Interaction Testing 与 Playwright 集成

A 无法交互
B 只静态渲染
C 在 story 内模拟交互并断言,配合 Playwright 验证 ✓ 正确答案
D 无断言
#

3. Ladle / Histoire 在 Storybook 轻量替代的工程取舍

A 轻量快速但生态较少 ✓ 正确答案
B 功能更全
C 更慢
D 生态更多
#

4. Playwright 与 Storybook 集成(@storybook/test-runner)

A 只静态
B 用 Playwright 在真实浏览器跑 story 交互测试 ✓ 正确答案
C 无法集成
D 无浏览器
#

5. 品牌主题切换与暗黑模式演示

A 固定主题
B decorator 应用主题,切换 class/CSS 变量 ✓ 正确答案
C 无法切换
D 无暗黑
#

6. 设计系统 Token 管理与展示

A 无法展示
B 可视化 token,设计与实现一致 ✓ 正确答案
C 只展示组件
D 无一致性
#

7. Token 评审、组件 ADR 与 RFC 流程在大型前端团队的工程价值

A 仅文档
B 无流程
C 随意变更
D 记录决策、团队共识、变更可控 ✓ 正确答案
#

8. @property 的 syntax/inherits/initial-value 在动画过渡的应用

A 只定义值
B 无法动画
C 注册类型使自定义属性可插值 ✓ 正确答案
D 与动画无关
#

9. CSS Properties & Values API(@property)的语义与边界

A 运行时行为
B 只声明值
C 无类型
D 注册自定义属性并声明类型/继承/初始值 ✓ 正确答案
#

10. CSS Typed OM(StylePropertyMap、ComputedStyleMap、CSSUnitValue、CSSStyleValue.parse)

A 类型化样式对象,避免字符串解析 ✓ 正确答案
B 字符串操作
C 无法运算
D 仅读取
#

11. Storybook 8 + Vite Builder 在 monorepo 组件库的工程价值

A 无法集成
B
C 单包
D 快速构建 + 多包集中预览组件 ✓ 正确答案
#

12. CSS Custom Properties API(@property 注册)

A 把自定义属性升级为类型化属性,支持动画 ✓ 正确答案
B 任意字符串
C 无法类型化
D 仅 JS
#

13. Typed OM 的 CSS.px(10)/CSS.rem(1.5) 单位与运算能力

A 无法运算
B 字符串
C 创建类型化单位值并可运算 ✓ 正确答案
D 仅读取
#

14. 注册自定义属性的语法、初始值、inherits

A 声明类型
B 定义初始值
C 声明属性是否继承 ✓ 正确答案
D 与注册无关
#

15. CSS Layout API(LayoutWorklet)

A 主线程
B 在 Worklet 线程自定义布局算法 ✓ 正确答案
C 无法自定义
D 仅样式
#

16. CSS Painting API(PaintWorklet + registerPainter)

A 仅背景色
B 主线程
C 无法绘制
D registerPainter 注册自定义绘制,paint() 执行 ✓ 正确答案
#

17. Worklet 在隔离线程执行与主线程解耦的能力

A 后台线程执行,不阻塞主线程 ✓ 正确答案
B 主线程执行
C 阻塞渲染
D 无解耦
#

18. CSS Animation Worklet 离主线程动画与 requestAnimationFrame 的差异

A Worklet 离主线程流畅,rAF 主线程受阻塞影响 ✓ 正确答案
B 两者相同
C Worklet 主线程
D rAF 离主线程
#

19. CSS Custom State(:--state)与自定义状态选择器

A 只能 data 属性
B 声明自定义状态并用自定义伪类选择器样式 ✓ 正确答案
C 无法状态
D 仅样式
#

20. CSS Custom Functions 与 if() 函数在动态样式的工程价值

A 在 CSS 中条件取值,增强动态样式 ✓ 正确答案
B 已稳定
C 无逻辑
D 仅 JS
#

21. CSS Custom Highlight API(::highlight、HighlightRegistry)的文本片段样式化(专题考察点)

A 高亮文本范围而不改 DOM,性能好 ✓ 正确答案
B 必须改 DOM
C 无法高亮
D 仅搜索
#

22. React/Vue3 组件 Story 编写与 args 参数控制

A 无法编辑
B 固定 props
C 参数化组件 props,供 Controls 编辑预览 ✓ 正确答案
D 仅类型
#

23. Vitest 的 @vitest/coverage-v8 在覆盖率与测试质量的工程价值

A 无覆盖率
B 计算覆盖率并设阈值门禁,提升测试质量 ✓ 正确答案
C 无法门禁
D 仅报告
#

24. Web Test Runner(@web/test-runner)

A 无法浏览器
B 仅 Node
C 在真实浏览器运行测试 ✓ 正确答案
D 单框架
#

25. Storybook MDX Docs 与 autodocs 的工程价值

A 自动从 story 生成 props 表与预览文档 ✓ 正确答案
B 全手写
C 无法自动
D 无 props
#

26. Chromatic visual regression test 在 PR 检查截图对比的工程价值

A 无法对比
B 无视觉
C 截图对比捕获视觉回归,PR 自动化检查 ✓ 正确答案
D 仅手动
#

27. Ladle 与 MSW 的 API 拦截协作

A 仅服务端
B 无拦截
C 无法 mock
D 拦截 API 返回 mock 数据,组件可用真实数据流测试 ✓ 正确答案
#

28. Cypress 14 在大型项目测试金字塔的工程价值

A 顶层 E2E,验证关键用户路径 ✓ 正确答案
B 底层单元
C 覆盖窄
D 无位置
#

29. Jest 30 在团队规范与可维护性的工程价值

A 统一单元测试基础 + 覆盖率门禁,提升可维护性 ✓ 正确答案
B 无规范
C 仅 E2E
D 无法覆盖
#

30. Vitest 的 @vitest/coverage-v8 在 CI/CD 与并行执行的工程价值

A 与 Vite 无关
B 无门禁
C 串行
D 覆盖率门禁 + 并行加速 + Vite 集成 ✓ 正确答案
#

31. Storybook 9 的 manager.api 与自定义 panel 在大型设计系统的价值

A 扩展 Storybook UI,集成设计系统工具 ✓ 正确答案
B 无法扩展
C 仅默认
D 无 API
#

32. Controls 面板与自动 Props 文档

A 实时编辑组件 props 并自动生成文档 ✓ 正确答案
B 静态
C 无法编辑
D 无文档
#

33. Storybook 的 play 函数与交互测试 与 MSW 的 API 拦截协作

A 无法交互
B 无数据
C play 模拟交互,MSW 提供 mock 数据,测试完整数据流 ✓ 正确答案
D 仅前端
#

34. MSW 的 http.get/http.post 与浏览器/Node 拦截 在大型项目测试金字塔的工程价值

A 仅浏览器
B 无 mock
C 浏览器/Node 拦截请求,统一 mock 跨层测试 ✓ 正确答案
D 仅 Node
#

35. Storybook Composition(多 Storybook 组合)在多包组合预览与团队协作的工程价值

A 单站点
B 聚合多个 Storybook,多包统一预览 ✓ 正确答案
C 无法聚合
D 单团队
#

36. 响应式预览与设备切换

A 无响应式
B 固定尺寸
C 无法切换
D 切换设备尺寸验证响应式 ✓ 正确答案
#

37. Lighthouse CI 与性能回归 与 a11y/性能/契约测试的协作

A 无审计
B CI 中审计性能/a11y 并设门禁,捕获回归 ✓ 正确答案
C 无法门禁
D 仅手动
#

38. Testing Library 在 E2E 与单元测试的协作

A 无协作
B 组件层测试 + E2E,共享用户视角查询 ✓ 正确答案
C 仅 E2E
D 仅单元
#

39. Playwright 1.5x 在 E2E 与单元测试的协作

A 无浏览器
B 仅 E2E
C 仅组件
D E2E + 组件测试,多浏览器覆盖 ✓ 正确答案
#

40. Storybook 的 play function 在组件交互测试(Testing Library)的工程应用

A 无法交互
B 静态
C 用 Testing Library 模拟交互并断言 ✓ 正确答案
D 无断言
#

41. Storybook 8/9 的 Tag System(autodocs、dev、test)的工程价值

A 仅文档
B 无分类
C 按 tag 控制 story 的文档、测试、开发行为 ✓ 正确答案
D 仅测试
#

42. Storybook 的 Controls(参数面板)在组件调试的现代应用

A 无法编辑
B 静态
C 实时编辑 props 预览,快速复现问题 ✓ 正确答案
D 无预览
#

43. Storybook 的 Actions(事件面板)在组件交互的工程实践

A 仅样式
B 无事件
C 无法捕获
D 捕获组件事件并展示,验证交互 ✓ 正确答案
#

44. Storybook 的 Viewport(响应式预览)在多设备测试的工程价值

A 固定
B 切换设备尺寸验证响应式适配 ✓ 正确答案
C 无法多设备
D 无响应式
#

45. Storybook 的 Backgrounds(背景切换)在主题测试的现代应用

A 固定背景
B 切换背景验证组件可读性与对比度 ✓ 正确答案
C 无法切换
D 无对比度
#

46. Storybook 的 Accessibility addon(a11y)

A 仅样式
B 无检测
C 用 axe 检测无障碍问题并报告 ✓ 正确答案
D 无法报告
#

47. Storybook 的 MDX(Markdown + JSX)

A 无文档
B 纯文本
C 无法 JSX
D Markdown 中嵌入 JSX 编写富文档 ✓ 正确答案
#

48. Storybook 的 Docs(自动生成 API 表格)的工程应用

A 无法自动
B 手写表格
C 自动生成组件 API 表格与预览 ✓ 正确答案
D 无 API
#

49. Storybook 的 Composition(跨项目引用)

A 无法引用
B 单项目
C 跨项目引用聚合 story ✓ 正确答案
D 无聚合
#

50. Storybook 8/9 的 On-demand(按需加载 Story)

A 更慢
B 全量加载
C 按需加载 story,提升大型项目性能 ✓ 正确答案
D 无优化
#

51. Storybook 的 Themes addon(多主题切换)

A 无主题
B 固定主题
C 无法切换
D 切换主题演示组件表现 ✓ 正确答案
#

52. Monorepo 中多包 Story 共享

A 无法聚合
B 每包独立
C 通过 Composition 聚合多包 story 统一预览 ✓ 正确答案
D 单包
#

53. Storybook 的 ondemand-story 与按需加载在 monorepo 的工程价值

A 全量
B 按需加载 story,提升大项目性能 ✓ 正确答案
C 更慢
D 无优化
#

54. Storybook Test Runner 与 Vitest 在大型仓库的取舍

A Test Runner 管单元
B 相同
C Test Runner 管浏览器交互,Vitest 管单元逻辑 ✓ 正确答案
D Vitest 管浏览器
#

55. CSS Properties and Values API (@property registered) 的工程价值

A 无法动画
B 字符串
C 类型化自定义属性,支持动画与令牌 ✓ 正确答案
D 仅令牌
#

56. Parser API(CSS Parser Worklet)

A 实验性提案,提供自定义 CSS 解析 ✓ 正确答案
B 已稳定
C 广泛支持
D 无解析
#

57. Animation Worklet 在自定义动画时间轴(WorkletAnimation)的工程应用

A 离主线程自定义时间轴,支持滚动驱动 ✓ 正确答案
B 主线程
C 无法自定义
D 仅 CSS
#

58. Paint Worklet(CSS Paint API)在自定义背景与边框的现代实践

A 自定义背景/边框绘制,隔离线程执行 ✓ 正确答案
B 主线程
C 无法绘制
D 仅背景色
#

59. Worklet 的 addModule() 注册与生命周期管理的现代应用

A 自动
B 同步
C 无加载
D 异步加载 Worklet 模块,需管理时机与错误 ✓ 正确答案
#

60. CSS Paint API 的 paint(letname, args) 在工程中的现代应用

A 无参数
B 引用 painter 并传参数绘制 ✓ 正确答案
C 仅样式
D 无法引用
#

61. Worklet 在跨域(cross-origin)的工程边界与跨 iframe 的协作

A 跨域加载需 CORS,跨 iframe 作用域独立 ✓ 正确答案
B 无限制
C 共享作用域
D 无需 CORS
#

62. CSS Custom Ident 与新选择器语法提案(:--foo)

A 广泛支持
B 已稳定
C 提案特性,用于自定义状态选择 ✓ 正确答案
D
#

63. 不把实验性 API 写成已稳定特性

A 无视支持
B 当作稳定
C 标注官方阶段与支持,避免夸大与兼容问题 ✓ 正确答案
D 夸大能力
#

64. CSS Custom Functions 与 if() 函数(提案/实验性,按官方阶段标注)

A 已稳定
B 提案/实验性,需标注阶段与支持 ✓ 正确答案
C 广泛支持
D
#

65. CSS Parser Level 4/5 与 @scope 兼容性的现代取舍

A 无兼容问题
B 全支持
C 提供样式作用域但兼容性不一,需降级 ✓ 正确答案
D 已废弃
#

66. @property registered properties 与 animation 的工程价值

A 无关
B 无法动画
C 注册类型使自定义属性可动画插值 ✓ 正确答案
D 仅视觉
#

67. CSS Properties and Values API(@property)在动画插值与类型注册的现代工程边界

A 无边界
B 全支持
C 类型注册支撑插值,但支持不一需降级 ✓ 正确答案
D 无需注册
#

68. CSS font-palette 调色板与 COLRv1 字体(Chrome 98+)在彩色字体的现代工程价值

A 无彩色
B 为彩色字体选择调色板 ✓ 正确答案
C 无法调色
D 仅字体
#

69. Custom State API(自定义 CSS 状态 setState("--state", "active"))在组件状态驱动样式的现代价值

A 无法样式
B 无状态
C 自定义状态驱动样式,替代 data 属性 ✓ 正确答案
D 仅 data
#

70. Storybook 的 Measure & Outline addons(布局测量)

A 无测量
B 显示组件尺寸与间距测量 ✓ 正确答案
C 仅样式
D 无法调试
#

71. Storybook 8/9 的 Test Runner(自动化测试运行器)

A 无浏览器
B 手动
C 在浏览器自动化运行 story 测试 ✓ 正确答案
D 仅单元
#

72. Storybook 的 Story 单元测试(composeStories + RTL)的现代边界

A 测浏览器
B 测 jsdom 渲染逻辑,浏览器行为由 test-runner 承担 ✓ 正确答案
C 无逻辑
D 仅视觉
#

73. Storybook 的 Static Deployment(部署为静态站点)

A 无构建
B 无法部署
C 仅本地
D 构建静态站点分享组件文档 ✓ 正确答案
#

74. Storybook 8/9 的 Vitest Plugin(与 Vitest 集成)

A 无集成
B 让 Vitest 运行 story 测试 ✓ 正确答案
C 仅 Playwright
D 无法测试
#

75. CI 中自动部署 Storybook 站点

A 手动
B 自动构建部署 + 测试门禁 + PR 预览 ✓ 正确答案
C 无门禁
D 无部署
#

76. ADR(Architecture Decision Records)

A 随意
B 无记录
C 记录架构决策与权衡,决策可追溯 ✓ 正确答案
D 仅文档
#

77. Bit + Storybook + Pluralsight Flow 的工程协作链

A 无协作
B 组件分发 + 文档 + 设计协作 ✓ 正确答案
C 仅文档
D 仅分发
#

78. Design Tokens W3C Spec 与跨平台令牌同步(iOS/Android/Web)

A 无统一
B 各平台手工
C 单一令牌源生成各平台,保证一致 ✓ 正确答案
D 仅 Web
#

79. Paint Worklet 的 PaintSize 在响应式画布的工程应用

A 提供绘制区域尺寸,绘制随容器适配 ✓ 正确答案
B 固定尺寸
C 无法响应
D 无尺寸
#

80. Layout Worklet 的 LayoutChild 与 LayoutFragment 的现代边界

A 无边界
B 广泛支持
C 已稳定
D 布局 API 的输入输出,但支持有限 ✓ 正确答案
#

81. Worklet 的 CSS.paintWorklet.addModule('url') 的加载时机工程价值

A 固定时机
B 按需加载避免阻塞与首帧缺失 ✓ 正确答案
C 无影响
D 同步
#

82. Paint Worklet 在复杂背景(噪点、网格)的现代工程应用

A 主线程
B 绘制噪点/网格等复杂背景,隔离线程性能好 ✓ 正确答案
C 无法复杂
D 仅简单色
#

83. Layout Worklet 在瀑布流(masonry)的工程边界与现状

A 无方案
B 已稳定
C 广泛支持
D 实验性,成熟方案用 JS 库 ✓ 正确答案
#

84. Worklet 的 console.log 在 Worklet 线程调试的工程价值

A 无调试
B 在 Worklet 线程调试输出状态 ✓ 正确答案
C 无法输出
D 仅主线程
#

85. Paint Worklet 的 paint(letname) 在 Canvas-like 2D 上下文的现代边界

A 有限 2D 绘制、无 DOM、隔离线程 ✓ 正确答案
B 完整 Canvas
C 有 DOM
D 主线程