react-native-web-testing（ReactNativeWeb测试）Skill 是什么？如何下载安装？

ReactNativeWeb测试Skill：让 React Native Web 的测试代码一次写对、一次跑通

核心结论速览

技能定位：react-native-web-testing（ReactNativeWeb测试Skill，技能ID 14190）是一个面向 React Native Web 应用的测试模式知识型技能，内置 Jest、React Native Testing Library（RNTL）的配置模板、组件测试、异步测试（waitFor）、模块模拟、Hook 测试、快照测试、集成测试等一整套可直接复用的写法。
解决的痛点：RN Web 项目最难的往往不是“写不写测试”，而是“Jest 配置里的 moduleNameMapper、transformIgnorePatterns 怎么写”“异步数据加载怎么等”“导航依赖怎么 mock”。这些细节网上答案零散、版本对不上，本技能把它们全部固化成可抄即用的模式。
使用方式：根据技能详情，该技能标记为 user-invocable: false，即不由用户直接以斜杠命令调用，而是作为 AI 编程助手在测试任务中被引用的能力包；它会借助 Read / Write / Edit / Bash / Grep / Glob 等工具读写项目文件并执行测试命令。
关键特色：除了“怎么写”，还给了明确的反模式清单（不要测内部 state、不要用 querySelector、不要断言样式像素值、不要忘记 cleanup），帮助团队避开最容易被写进代码库的坏测试。
适配人群：跨端团队的前端/RN 工程师、需要补测试覆盖率的项目负责人，以及正在从原生 RN 迁移到 React Native Web 的团队。

该技能叫什么？如何下载安装 AI 技能提升开发效率？

基本信息

项目	内容
技能中文名	ReactNativeWeb测试Skill
技能英文名	react-native-web-testing
技能ID	14190
技能类型	测试模式 / 知识型技能（`user-invocable: false`）
可用工具	Read、Write、Edit、Bash、Grep、Glob
关联技能	react-native-web-core、react-native-web-navigation、react-native-web-performance

它到底解决什么问题

React Native Web 的测试有一层“双重身份”的复杂度：代码按 React Native 的方式书写（Pressable、TextInput、FlatList），实际在 Web 上通过 react-native-web 渲染成 DOM。于是开发者经常同时遇到以下几类问题：

环境配置踩坑：Jest 不认识 react-native 包名，需要映射到 react-native-web；node_modules 里的 RN 系列包默认不被转译，需要调整 transformIgnorePatterns。
查询方式混乱：习惯写 container.querySelector('.button')，但 RNTL 推荐的是 screen.getByRole('button') 这类面向可访问性的查询。
异步测试不稳：请求、状态更新、加载态切换，随手写 expect 就报“元素不存在”，因为没等渲染完成。
依赖无法隔离：导航、主题、认证上下文把组件“绑死”，单个组件测试起不来。

本技能把这些问题的标准答案整理成一组模式，AI 助手在接到“帮我给这个 RN Web 组件写测试”的任务时，可以直接按这些模式产出代码，而不用每次重新推导。

一键安装 AI 技能提升开发效率的思路

安装这类技能的通用思路是“先备好运行环境，再把技能装进 AI 工具，最后用一个最小用例验证是否生效”。具体步骤如下：

准备项目环境（前提）：项目需为 React Native Web 工程，已安装 Node.js 与 npm/yarn，具备可运行的 Jest 测试脚本；建议同时安装 @testing-library/react-native、jest、react-native-web 等依赖。版本与包名以官方说明为准。
打开技能入口：在支持 AI 技能（Skill）生态的 AI 编程助手或 IDE 插件中，打开技能市场 / 技能管理页面，用技能英文名 react-native-web-testing 或技能ID 14190 进行搜索。具体下载入口与命令以官方说明为准。
安装并启用：按页面提示完成安装，确认技能状态为已启用。由于该技能声明为 user-invocable: false，通常不需要手动“调用”它，而是由 AI 在识别到测试类任务时自动引用。
确认权限：技能需要文件读写与命令执行能力（Read / Write / Edit / Bash / Grep / Glob），请确认当前工作区已授予相应权限，否则它只能“讲模式”而无法“落代码、跑测试”。
验证是否生效：在项目里挑一个最简单的小组件（比如一个带 onPress 的按钮组件），向 AI 提出类似“用 React Native Testing Library 给这个 Button 组件写一个点击测试”的请求。若返回结果中出现 render、screen.getByText、fireEvent.press、expect(onPress).toHaveBeenCalledTimes(1) 这套结构，且建议了 jest.config.js 的 moduleNameMapper 映射，即说明技能已在起作用；再让 AI 直接执行测试命令、看到用例通过，则视为完整生效。

该技能的主要功能和特点

Jest 配置模板开箱即用：直接给出 preset: 'react-native'、moduleNameMapper 把 ^react-native$ 映射到 react-native-web、transformIgnorePatterns 放行 react-native / @react-native / react-native-web、以及 setupFilesAfterEach 的配置骨架，省掉一晚上的试错。
组件交互测试模式：以“用户能看到什么、点了会发生什么”为视角，示范用 getByText、getByPlaceholderText、getByRole 定位元素，用 fireEvent.press / fireEvent.changeText 触发行为，断言回调被调用。
异步测试标准姿势：演示 waitFor 等待数据加载、加载态出现与消失的完整断言链路，并用 jest.fn() 模拟 global.fetch，把网络依赖彻底隔离。
自定义渲染工具（renderWithProviders）：封装带 ThemeProvider 的 renderWithProviders，让“需要主题/上下文才能渲染”的组件也能被独立测试，避免每个用例重复包 Provider。
模块模拟能力：示范 jest.mock('@react-navigation/native', ...) 模拟导航 hook，从而断言 navigate 被调用及参数，把导航依赖从单元测试中剥离。
Hook 与上下文测试：用 renderHook + act 测试 useCounter 这类自定义 Hook 的状态变化；用 AuthProvider 的不同 initialUser 值验证登录态分支渲染。
快照与集成测试：toJSON() + toMatchSnapshot() 做结构回归；用 NavigationContainer + Stack.Navigator 搭一个 TestApp，验证“首页 → 详情页”的跳转流程。
常见业务模式沉淀：表单校验（必填项提示、校验失败不触发 onSubmit）、列表渲染（逐条断言 + 空状态“No items found”）、可访问性（getByRole、toHaveAccessibilityState、toHaveAccessibilityHint）都有现成范例。
明确的反模式清单：这是它区别于普通示例集合的关键——直接告诉你不要测内部 state、不要用 DOM 的 querySelector、不要断言精确样式值、不要忘记 jest.clearAllMocks() 与 cleanup()。

和普通工具比强在哪：普通脚手架只给你一个空的测试文件，AI 编码助手在没有专门模式约束时容易生成 querySelector 或直接断言 state 的“伪测试”；本技能把“可维护、抗重构、贴近用户行为”的测试规范前置到了生成阶段。

如何使用该技能？

以下流程假设技能已安装并在 AI 编程助手中启用。

第 1 步：让 AI 检查并补全 Jest 配置

在对话框中描述：“项目是 React Native Web，帮我看下 jest.config.js 现在能不能跑 RNTL 测试。”技能会引导产出类似下面的配置（来自技能详情）：

// jest.config.js
module.exports = {
  preset: 'react-native',
  moduleNameMapper: {
    '^react-native$': 'react-native-web',
  },
  transformIgnorePatterns: [
    'node_modules/(?!(react-native|@react-native|react-native-web)/)',
  ],
  setupFilesAfterEach: ['<rootDir>/jest.setup.js'],
};

第 2 步：提出具体的测试需求（输入示例）

推荐把“组件路径 + 交互行为 + 需要断言的期望”一次性说清，例如：

给 LoginForm 写测试：1）输入合法邮箱和密码点击 Login 时，onSubmit 收到 { email, password }；2）输入非法邮箱时展示 “Invalid email address” 且不提交。

第 3 步：查看输出并确认测试视角（输出说明）

技能会产出面向行为的用例，结构大致为：

import { render, screen, fireEvent, waitFor } from '@testing-library/react-native';
import { LoginForm } from './LoginForm';

describe('LoginForm', () => {
  it('submits form with valid credentials', async () => {
    const onSubmit = jest.fn();
    render(<LoginForm onSubmit={onSubmit} />);

    fireEvent.changeText(screen.getByPlaceholderText('Email'), 'user@example.com');
    fireEvent.changeText(screen.getByPlaceholderText('Password'), 'password123');
    fireEvent.press(screen.getByText('Login'));

    await waitFor(() => {
      expect(onSubmit).toHaveBeenCalledWith({
        email: 'user@example.com',
        password: 'password123',
      });
    });
  });
});

请留意输出中的三个“正确信号”：① 用 screen.getBy* 而非 querySelector；② 异步一律包在 waitFor 中；③ 断言的是回调与可见文案，而不是内部 state。

第 4 步：处理依赖（模拟导航 / 包 Provider）

若组件依赖导航或主题，可直接要求：“导航用 jest.mock 模拟，主题用 renderWithProviders 包一层。”技能会给出 useNavigation 的模拟写法与带 ThemeProvider 的自定义渲染函数。

第 5 步：执行并迭代

让 AI 通过 Bash 运行测试（例如项目约定的 npm test / npx jest 脚本，以项目实际配置为准），根据失败信息继续修复。常见修复方向：补充 await waitFor、把 getByText 换成更稳定的 getByRole、在 afterEach 中加上 jest.clearAllMocks() 和 cleanup()。

第 6 步：补齐边界与可访问性

最后追加要求：“补充空列表状态、按钮 loading 时 disabled 的可访问性断言、以及一个快照测试”，让覆盖率与健壮性一起收口。

同类型竞品对比分析

方案名称	定位	核心功能	安装/使用门槛	适用场景	优势与不足
react-native-web-testing（本技能）	AI 技能：RN Web 测试模式库	Jest 配置模板、组件/异步/Hook/上下文/快照/集成测试模式、反模式清单	需在 AI 技能生态中安装并授予文件与命令权限；需 RN Web 项目环境	团队需要快速建立可维护的单元与集成测试基线	优势：模式完整、含反模式、生成即可跑；不足：依赖 AI 工具的技能生态，纯离线环境不适用，复杂业务逻辑仍需人工判断
纯手写测试 + RNTL 官方文档	传统做法	依靠官方 API 文档与社区示例自行编写	零安装，但学习曲线陡峭，需自行摸索 RN Web 的 Jest 映射细节	个人小项目、偶尔补几个用例	优势：完全可控、无额外依赖；不足：配置与异步写法反复试错，团队风格难统一
通用 AI 编码助手（无专项技能）	通用代码补全/生成	根据上下文生成测试代码	门槛低，接入方便	快速起草测试	优势：上手最快；不足：容易生成 `querySelector`、断言内部 state 等“伪测试”，对 RN Web 的特有配置（如 `moduleNameMapper`）覆盖不足
Detox / Appium 等端到端测试框架	真机/浏览器端到端测试	驱动真实设备或浏览器执行完整用户流程	需搭建模拟器、驱动与 CI 流水线，配置成本高、执行慢	发布前的关键链路回归、跨端一致性验收	优势：最接近真实用户路径，覆盖原生能力；不足：反馈周期长、不适合组件级细粒度断言，不能替代单元测试

选型建议：单元与组件层用本技能 + RNTL，端到端层再叠加 Detox 类工具，两者是互补而非替代关系。

该技能的典型应用场景与实际体验情况

场景一：跨端团队为共享组件补测试基线

角色与痛点：某团队用 React Native Web 同时产出 App 与 H5，共享组件库有 40 多个组件，但测试文件寥寥。新人写的测试有的断言内部 state、有的断言 backgroundColor，一次样式重构就大面积失败。

使用方式：先用本技能统一 jest.config.js 与 renderWithProviders，再批量让 AI 按“行为视角”重写组件测试，最后用技能里的反模式清单做一次代码评审。

实际体验：上手难度低，配置环节基本一次通过；效果上，测试从“改样式就红”变成“改交互才红”，可信度明显提升。注意点：历史用例里残留的 querySelector 需要逐个替换，建议分批推进而非一次性全改。

场景二：登录/表单流程的回归测试

角色与痛点：表单是 bug 高发区，校验规则频繁调整，每次发版前人工点一遍，既耗时又容易漏。

使用方式：按技能提供的“测试表单”模式，让 AI 生成“空提交应显示必填提示、且 onSubmit 不被调用”“非法邮箱应显示 Invalid email address”等用例。

实际体验：waitFor + getByText 的组合让异步校验断言非常稳定；建议把提示文案集中管理，避免文案微调导致用例大面积失败。

场景三：导航流程集成测试

角色与痛点：页面跳转与参数传递最容易出现“参数丢了”“返回栈不对”的问题，单测覆盖不到。

使用方式：用技能中的 TestApp（NavigationContainer + Stack.Navigator）搭一个最小导航壳，断言“点击 View Details 后进入 Details Screen”；单页测试则用 jest.mock 模拟 useNavigation，断言 navigate 被调用及参数。

实际体验：这类集成测试收益高，但因为涉及更多渲染，执行时间略长，建议放在独立的分组里运行；注意 fireEvent.press 后必须 await waitFor，否则容易拿到上一帧的界面。

场景四：自定义 Hook 与登录态分支

角色与痛点：useCounter、useAuth 这类逻辑散落各处，只能靠点页面间接验证。

使用方式：用 renderHook + act 直接断言 Hook 的初始值与变更结果；用 AuthProvider 分别传 initialUser 为对象与 null，断言受保护页面显示“Welcome, John”或“Please log in”。

实际体验：Hook 测试撰写速度很快、断言直观，是性价比最高的一类；注意 act 包裹状态更新，否则会出现警告。

该技能能为用户带来的价值

配置时间从“半天”压缩到“几分钟”：moduleNameMapper、transformIgnorePatterns、setupFilesAfterEach 一套模板直接可用，省去了在搜索结果里比对版本的反复试错。
测试质量从“能跑”升级到“可维护”：反模式清单把“测内部实现”这类隐患挡在代码评审之前。可量化的收益是：一次样式重构引发的无效失败用例大幅减少，测试红灯重新变成“真的有问题”的信号。
降低测试门槛：不熟悉 RNTL 的开发者也能通过自然语言描述需求，直接拿到符合规范的用例，团队内测试风格自然统一。
异步与依赖问题不再靠猜：waitFor 等待策略、fetch 模拟、导航 mock 都有标准答案，显著减少“偶发失败”带来的排查成本。
长期价值：测试模式会沉淀为团队资产，配合 react-native-web-core、react-native-web-navigation、react-native-web-performance 等相关技能，形成从核心概念、导航到性能测试的完整能力矩阵。

常见问题 FAQ

Q1：这个技能怎么安装？装完怎么确认能用？ A：在支持 AI 技能生态的工具中按英文名 react-native-web-testing 或技能ID 14190 搜索安装，具体入口与命令以官方说明为准。安装时请确保授予文件读写与命令执行权限。验证方法：让 AI 给一个简单按钮组件写点击测试，若输出使用 render、screen.getByText、fireEvent.press 并建议了 moduleNameMapper 映射，即说明生效。

Q2：它是用户可以直接调用的命令吗？ A：根据技能详情，它标记为 user-invocable: false，属于被 AI 引用的模式型技能，而不是用户敲斜杠命令触发的工具。你只需在测试相关对话中提出需求，由 AI 自动引用其模式。

Q3：收费吗？ A：技能详情中未包含任何价格信息，是否收费取决于所在平台与技能市场的规则，请以官方说明为准。技能本身依赖的 Jest、React Native Testing Library 等属于开源生态，使用前请确认各自许可证。

Q4：适合谁用？和 Detox 这类端到端框架怎么选？ A：最适合使用 React Native Web 的跨端团队与需要补测试覆盖率的项目。选型上并非二选一：组件与单元层用本技能 + RNTL，追求快速、细粒度、抗重构；关键链路的真机/浏览器验收用 Detox、Appium 之类的端到端框架，追求真实。两层配合才是完整策略。

Q5：它生成的测试能直接进 CI 吗？ A：可以，产出的就是标准 Jest + RNTL 用例。建议在 CI 中固定加上 afterEach 里的 jest.clearAllMocks() 与 cleanup() 清理逻辑，并避免快照测试滥用——快照适合结构回归，但不该替代行为断言。