React测试中findByTestId行为受测试顺序影响的问题咨询

根本原因分析 #

• 全局状态未隔离：你用到的@storybook/testing-react的composeStory会缓存部分故事全局上下文、第三方webcomponents的初始化状态、i18n的useTranslation语言包加载状态都属于Jest测试实例的全局资源，React Testing Library默认的cleanup逻辑只会清理React渲染的DOM节点，不会重置这些非React管理的全局状态，前一个测试的执行结果会直接影响后一个测试的运行环境。
• 元素渲染优先级差异：你的组件中object-page-wrapper是ObjectPage组件的根节点，渲染优先级远高于作为DynamicPageTitle子节点的button-wrapper：object-page-wrapper不需要等i18n翻译、webcomponents内部初始化完成就可以渲染，而button-wrapper必须等useTranslation返回的翻译内容加载完成、DynamicPageTitle的actions插槽渲染完成后才会存在。
• 异步任务溢出：第一个测试用await findByTestId("object-page-wrapper")只等根节点出现就结束测试，此时还在队列中的i18n加载、webcomponents更新任务会被带到第二个测试中执行，打乱第二个测试的渲染时序，导致findByTestId在超时时间内找不到button-wrapper。调换测试顺序后，第一个测试需要等button-wrapper出现，会等待所有异步任务全部执行完成，全局资源全部就绪，第二个测试自然可以正常找到根节点。

解决方案 #

• 补全全局资源隔离逻辑：在测试文件的beforeEach钩子中，每次执行测试前重新调用composeStory生成新的PrimaryStory实例，同时重置i18n实例状态、销毁已初始化的第三方webcomponents实例，保证每个测试的运行环境完全独立。
• 优化测试写法：两个测试的校验内容属于同一个组件的渲染结果，可以合并为同一个测试用例，先校验根节点存在，再校验按钮存在，既减少冗余渲染，也避免顺序依赖问题。如果一定要拆分测试，可以给按钮的查询增加超时配置：await findByTestId("button-wrapper", { timeout: 3000 })，预留足够的异步加载时间。
• Mock异步依赖消除不确定性：MockuseTranslation钩子，直接返回固定翻译内容，不需要真的异步加载语言包；如果第三方webcomponents提供了测试 mock 方案，直接使用mock版本的组件，避免其内部异步更新影响测试稳定性。

内容的提问来源于stack exchange，提问作者Lucas Heim