在Electron中集成Cypress时出现'require is not defined'错误

这个问题我之前帮人排查过，核心原因有两个：一是你的渲染进程代码直接依赖了Node.js的require，但Cypress的测试环境是纯浏览器环境，根本不支持这个Node API；二是你用的electron.remote模块早就被废弃了，不符合Electron现在的安全规范。咱们一步步来解决：

第一步：替换废弃的remote模块，改用IPC通信 #

Electron从v14开始就正式移除了remote模块，官方推荐用主进程和渲染进程的IPC通信来实现跨进程操作。

1. 主进程添加IPC监听 #

在你的Electron主入口文件（比如main.js）里，添加一个处理打开DevTools的IPC监听：

const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');

// 常规的窗口创建代码...
function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 后面会说这个配置的重要性
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,
      nodeIntegration: false
    }
  });

  mainWindow.loadFile('index.html');
}

// 监听渲染进程的DevTools切换请求
ipcMain.handle('toggle-devtools', () => {
  const activeWindow = BrowserWindow.getFocusedWindow();
  if (activeWindow) {
    activeWindow.toggleDevTools();
  }
});

app.whenReady().then(createWindow);

2. 编写预加载脚本 #

创建一个preload.js文件，用来安全地把Electron API暴露给渲染进程（这是Electron现在推荐的安全做法，避免渲染进程直接访问Node环境）：

const { ipcRenderer, contextBridge } = require('electron');

// 只暴露需要的API，避免安全风险
contextBridge.exposeInMainWorld('electronAPI', {
  toggleDevTools: () => ipcRenderer.invoke('toggle-devtools')
});

3. 修改渲染进程代码 #

把你index.html里的脚本改成调用预加载脚本暴露的API，彻底去掉require：

<script>
window.addEventListener("keydown", e => {
  if (e.ctrlKey && e.shiftKey && e.key === "I") {
    // 调用预加载脚本暴露的方法
    window.electronAPI.toggleDevTools();
  }
});
</script>

第二步：适配Cypress测试环境 #

现在你的Electron应用本身已经不会报错了，但Cypress加载页面时，因为它的环境里没有window.electronAPI，可能还是会出问题。我们可以在测试里给这个API加个空实现：

在你的Cypress测试文件里，添加这段代码：

cy.visit('index.html').then(() => {
  // 给测试环境添加空实现，避免报错
  window.electronAPI = {
    toggleDevTools: () => {}
  };
});

或者更优雅一点，在Cypress的support/index.js里全局配置，这样所有测试都能生效：

Cypress.on('window:before:load', (win) => {
  win.electronAPI = {
    toggleDevTools: () => {}
  };
});

为什么之前的代码会报错？ #

再给你理清楚根源：

• 现代Electron默认关闭了渲染进程的nodeIntegration，所以渲染进程里直接用require本来就会报错，只是你可能在开发时开了这个配置，但Cypress的环境绝对不会有Node支持。
• electron.remote模块依赖Node集成，而且已经被废弃，官方早就不推荐使用了。
• Cypress是在纯浏览器环境里运行测试，没有Node.js的任何API，所以require肯定会提示未定义。

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