如何让WebdriverIO等待Electron/React组件完成重渲染？

我之前在测试Electron+React应用时也遇到过一模一样的问题——常规的WebdriverIO等待方法（像waitForText()、waitForExist()）完全搞不定组件重渲染的等待，毕竟很多时候组件本来就存在、文本也没变化，我们要等的是内部状态更新后的重新绘制完成。下面分享几个我亲测有效的解决方案：

方案1：给组件添加重渲染标记属性 #

这是最通用的方法，核心思路是让组件每次重渲染时更新一个唯一标记，然后在测试中等待这个标记变化，以此确认重渲染完成。

第一步：在React组件中添加标记 #

给目标组件加一个随渲染更新的属性，比如用一个递增的渲染计数：

import { useState, useEffect } from 'react';

function TargetComponent() {
  const [renderCount, setRenderCount] = useState(0);

  // 每次组件依赖变化触发重渲染时，更新计数
  useEffect(() => {
    setRenderCount(prev => prev + 1);
  }, [/* 这里填组件的所有依赖项，比如props、state变量 */]);

  return (
    <div data-render-count={renderCount} className="target-component">
      {/* 组件内容 */}
    </div>
  );
}

第二步：在测试中等待标记变化 #

先获取初始的标记值，触发重渲染操作后，用waitUntil等待标记更新：

// 获取初始渲染计数
const initialRenderCount = await $('.target-component').getAttribute('data-render-count');

// 触发会导致组件重渲染的操作（比如点击按钮、修改输入等）
await $('#trigger-update-btn').click();

// 等待渲染计数变化，超时时间可按需调整
await browser.waitUntil(async () => {
  const currentRenderCount = await $('.target-component').getAttribute('data-render-count');
  return currentRenderCount !== initialRenderCount;
}, {
  timeout: 5000,
  timeoutMsg: '组件未在指定时间内完成重渲染'
});

// 现在可以安全地断言重渲染后的属性了
const updatedProp = await $('.target-component').getAttribute('data-custom-prop');
expect(updatedProp).toBe('预期的更新值');

方案2：直接等待目标属性的预期变化 #

如果组件重渲染后有明确的属性（或样式、属性值）变化，不需要额外加标记，直接用waitUntil监听这个属性的最终状态：

// 触发重渲染操作
await $('#modify-state-btn').click();

// 等待组件的特定属性变为预期值
await browser.waitUntil(async () => {
  // 比如等待组件的data-active属性变为"true"
  const isActive = await $('.target-component').getAttribute('data-active') === 'true';
  // 或者等待某个样式变化，比如opacity从0变1
  // const isVisible = await $('.target-component').getCSSProperty('opacity').value === '1';
  return isActive;
}, {
  timeout: 3000,
  timeoutMsg: '组件重渲染后未达到预期状态'
});

// 执行断言
expect(await $('.target-component').getAttribute('data-active')).toBe('true');

方案3：利用自定义事件监听重渲染完成 #

如果不想给组件加标记，可以在组件重渲染完成后发送一个自定义事件，然后在测试中监听这个事件：

第一步：在React组件中发送自定义事件 #

在组件的useEffect里（依赖项填触发重渲染的变量），向window发送自定义事件：

useEffect(() => {
  // 重渲染完成后触发自定义事件
  window.dispatchEvent(new CustomEvent('component-rendered', { 
    detail: { componentName: 'TargetComponent' } 
  }));
}, [/* 组件依赖项 */]);

第二步：在测试中等待事件触发 #

通过Spectron的webContents监听事件，等待事件触发后再执行测试：

// 创建一个Promise用于等待自定义事件
const waitForRender = new Promise(resolve => {
  browser.webContents.once('component-rendered', (event, args) => {
    // 可以通过componentName过滤，确保是目标组件的重渲染事件
    if (args.componentName === 'TargetComponent') {
      resolve();
    }
  });
});

// 触发重渲染操作
await $('#update-component-btn').click();

// 等待事件触发
await waitForRender;

// 执行断言
const updatedText = await $('.target-component').getText();
expect(updatedText).toBe('重渲染后的文本');

注意事项 #

• 绝对不要用setTimeout硬等，不同环境的渲染速度差异很大，会导致测试不稳定。
• 确保waitUntil中的回调是异步的，因为WebdriverIO的所有元素操作命令都是异步的。
• 如果组件会连续触发多次重渲染（比如状态连续更新），建议直接等待最终的预期状态，而不是仅仅等待标记变化，避免在中间状态就执行断言。

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