CRA转Vite后Cypress测试遇堆内存不足及DOM元素错误

1. JavaScript堆内存溢出问题 #

你遇到的内存溢出，本质是cypress-vite预处理器处理测试文件时，和Vite配置里的部分插件（比如viteCommonjs）产生冲突，导致打包过程内存占用过高。临时添加NODE_OPTIONS=--max_old_space_size=32768能应急，但更根本的优化方案：

• 指定预处理器使用的Vite配置：不要用默认的vitePreprocessor()，手动传入你的Vite配置并禁用测试环境不需要的插件，避免重复加载导致内存浪费：

  // cypress.config.ts
  import { defineConfig } from "cypress";
  import vitePreprocessor from 'cypress-vite';
  import viteConfig from './vite.config';
  
  export default defineConfig({
    e2e: {
      setupNodeEvents(on, config) {
        // 过滤掉测试环境不需要的插件
        const testViteConfig = {
          ...viteConfig,
          plugins: viteConfig.plugins.filter(plugin => 
            plugin.name !== 'vite-plugin-commonjs'
          )
        };
        on('file:preprocessor', vitePreprocessor(testViteConfig));
      },
      baseUrl: 'http://localhost:3000',
      specPattern: ['./tests/**/*.ts', './devops-tests/**/*.ts']
    },
  });
  

• 检查版本兼容性：确保cypress-vite、Cypress、Vite版本匹配，比如cypress-vite要求Cypress 10+、Vite 3+，版本不兼容也会引发内存泄漏类问题。

2. createRoot(...): Target container is not a DOM element 错误 #

这个错误是React启动时找不到挂载的DOM节点，常见原因和解决方法：

原因1：index.html缺少根节点 #

检查项目根目录的index.html，确保存在用于挂载React的根元素：

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script>
</body>

如果根节点ID不是root，要同步修改React入口文件的挂载代码：

// src/main.tsx
import { createRoot } from 'react-dom/client';
const rootElement = document.getElementById('your-custom-root-id');
if (!rootElement) throw new Error('Root DOM element not found');
createRoot(rootElement).render(<App />);

原因2：Cypress加载时机不匹配 #

Cypress访问页面时，可能在DOM完全加载前就执行测试代码，导致React找不到根节点。在测试用例里添加等待逻辑：

// 测试文件示例
cy.visit('/');
cy.get('#root').should('be.visible'); // 等待根节点出现后再执行后续操作

原因3：Vite配置的open: true干扰 #

你的Vite配置里server.open: true会自动打开浏览器，可能和Cypress的浏览器实例冲突，导致页面加载异常。可以在测试环境禁用该选项：

// vite.config.ts
export default defineConfig(({ mode }) => {
  return {
    // ...其他配置
    server: {
      port: 3000,
      open: mode !== 'test' // 测试环境不自动打开浏览器
    }
  };
});

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