如何在WebDriverIO+Mocha环境下Mock Electron的IPC调用

核心思路 #

你的isConnectedToCloud函数依赖window.electronAPI.getCloudUrl这个IPC调用，因此直接在浏览器进程中Mock全局的window.electronAPI对象，就能控制返回值进而影响组件渲染。WebDriverIO的execute方法可在浏览器上下文执行自定义JS，用来注入Mock逻辑。

具体实现步骤 #

1. 针对不同测试场景注入Mock #

在每个测试用例执行时，先注入Mock并刷新页面，确保组件渲染时使用Mock后的IPC方法。

场景1：Mock为未连接状态（显示Connect按钮）

it('should show Connect button', async () => {
  // 注入Mock：让getCloudUrl返回空字符串，使isConnectedToCloud返回false
  await browser.execute(() => {
    window.electronAPI = window.electronAPI || {};
    window.electronAPI.getCloudUrl = async () => '';
  });

  // 刷新页面触发组件重新渲染
  await browser.refresh();

  const button = await $('div#cloud-connect button');
  expect(button).toBeDisplayed();
  expect(button).toHaveText('Connect');
});

场景2：Mock为已连接状态（显示Disconnect按钮）

it('should show Disconnect button', async () => {
  // 注入Mock：让getCloudUrl返回非空字符串，使isConnectedToCloud返回true
  await browser.execute(() => {
    window.electronAPI = window.electronAPI || {};
    window.electronAPI.getCloudUrl = async () => 'https://mock-cloud.example.com';
  });

  // 刷新页面触发组件重新渲染
  await browser.refresh();

  const button = await $('div#cloud-connect button');
  expect(button).toBeDisplayed();
  expect(button).toHaveText('Disconnect');
});

2. 优化：用钩子避免用例间污染（可选） #

如果有多个测试用例需要Mock，可借助Mocha钩子统一管理Mock状态，防止用例间的Mock逻辑互相影响：

describe('Display Connect/Disconnect buttons', () => {
  // 每个用例执行前重置Mock
  beforeEach(async () => {
    await browser.execute(() => {
      window.electronAPI = window.electronAPI || {};
      // 重置为原始状态（或空对象）
      delete window.electronAPI.getCloudUrl;
    });
  });

  it('should show Connect button', async () => {
    await browser.execute(() => {
      window.electronAPI.getCloudUrl = async () => '';
    });
    await browser.refresh();
    // 断言逻辑...
  });

  it('should show Disconnect button', async () => {
    await browser.execute(() => {
      window.electronAPI.getCloudUrl = async () => 'https://mock-cloud.example.com';
    });
    await browser.refresh();
    // 断言逻辑...
  });
});

3. 注意事项 #

• Mock时机：必须在组件useEffect执行前完成Mock注入，因此注入后需要刷新页面触发组件重新渲染。
• 预加载脚本冲突：如果你的electronAPI是通过预加载脚本注入的，需确保测试环境中预加载脚本不会覆盖你注入的Mock，或在预加载脚本中预留Mock扩展接口。
• 状态清理：每个测试用例执行后，务必清理Mock状态，避免影响后续用例。

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