Jest快照测试本地运行通过但Jenkins环境执行失败原因排查

核心原因归类 #

• 依赖版本不一致
  这是最常见的原因，本地安装的依赖包（包括xstate、enzyme、FTWizard对应的组件库、react相关依赖）版本和Jenkins环境安装的版本不一致，不同版本的组件渲染逻辑存在差异，就会出现额外的DOM节点。如果仓库没有提交package-lock.json/yarn.lock锁文件，或者Jenkins构建时使用的是npm install而非npm ci，会导致Jenkins自动安装符合语义化版本规则的最新版依赖，和本地依赖版本出现偏差。
• xstate状态机未到达稳态就生成快照
  你当前的测试代码是组件渲染完成后直接生成快照，没有等待xstate状态机初始化完成、进入预设的初始状态。本地机器性能较好，状态机初始化速度快，渲染快照时已经进入了预期状态；Jenkins构建机器性能通常弱于本地开发机，可能状态机还在初始化过程中，还未完成状态切换就生成了快照，导致结构不符。
• 环境变量差异
  本地和Jenkins的运行环境变量（比如NODE_ENV、业务自定义的功能开关变量）不一致，FTWizard组件或者内部依赖的子组件，会根据环境变量判断是否渲染额外的容器节点（比如你报错中出现的class="stack"的div）。
• 测试运行环境配置差异
  本地和Jenkins的测试运行工具版本不一致，比如jsdom、enzyme适配器的版本不同，对DOM的渲染、序列化逻辑存在差异，也会导致快照结果不同。

对应排查方案 #

• 确认仓库提交了完整的依赖锁文件，Jenkins构建阶段执行npm ci或者yarn install --frozen-lockfile安装依赖，保证两地依赖版本完全一致。
• 修改测试代码，增加等待状态机稳态的逻辑，确认目标元素渲染完成后再生成快照，参考示例：

  import { render } from 'enzyme';
  import React from 'react';
  import Wizard from '../index';
  
  describe('Wizard', () => {
    describe('Snapshot tests', () => {
      it('Should render the Wizard', async () => {
        const container = render(<Wizard />);
        // 等待目标元素渲染完成，确保状态机进入预期状态
        while(!container.find('.headingSection').exists()) {
          await new Promise(resolve => setTimeout(resolve, 10));
        }
        expect(container).toMatchSnapshot();
      });
    });
  });
  

• 在测试代码中打印两地的环境变量，确认所有相关变量取值一致，也可以在测试代码开头硬编码覆盖环境变量验证问题是否解决。
• 排查两地的测试工具版本，保证jest、enzyme、enzyme-adapter、jsdom的版本完全匹配。

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