cypress-vite：堆出 memory

Question

我最近将我的 CRA 项目转换为使用 Vite。 除了 Cypress e2e 测试外，一切正常。 我看到测试需要预处理，所以我添加了cypress-vite 。

现在每次我尝试运行测试时，都会收到以下错误：

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
 1: 0x100a26fe4 node::Abort() [/Users/orenurbach/.nvm/versions/node/v17.9.1/bin/node]
 2: 0x100a2716c node::errors::TryCatchScope::~TryCatchScope() [/Users/orenurbach/.nvm/versions/node/v17.9.1/bin/node]
 3: 0x100b75a98 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/Users/orenurbach/.nvm/versions/node/v17.9.1/bin/node]
 4: 0x100b75a2c v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/Users/orenurbach/.nvm/versions/node/v17.9.1/bin/node]
 5: 0x100cf9c98 v8::internal::Heap::GarbageCollectionReasonToString(v8::internal::GarbageCollectionReason) [/Users/orenurbach/.nvm/versions/node/v17.9.1/bin/node]
 6: 0x100cf87a4 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/Users/orenurbach/.nvm/versions/node/v17.9.1/bin/node]
...

这是我的cypress.config.ts ：

import { defineConfig } from "cypress";
import vitePreprocessor from 'cypress-vite';

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on('file:preprocessor', vitePreprocessor());
    },
    baseUrl: 'http://localhost:3000',
    specPattern: ['./tests/**/*.ts', './devops-tests/**/*.ts']
  },
});

vite.config.ts :

import { defineConfig } from 'vite';
import svgrPlugin from 'vite-plugin-svgr';
import react from '@vitejs/plugin-react';
import { viteCommonjs } from '@originjs/vite-plugin-commonjs';

import { resolve } from 'path';

export default defineConfig({
  build: {
    outDir: 'build',
    rollupOptions: {
      input: {
        index: resolve(__dirname, 'index.html')
      }
    }
  },
  plugins: [
    react(),
    svgrPlugin({
      svgrOptions: {
        icon: true
      }
    }),
    viteCommonjs()
  ],
  resolve: {
    alias: {
      src: resolve(__dirname, 'src')
    }
  },
  server: {
    port: 3000,
    open: true
  },
  preview: {
    port: 3000
  }
});

---

编辑：我添加了NODE_OPTIONS=--max_old_space_size=32768并且测试完成运行，但现在出现了不同的错误：

createRoot(...): Target container is not a DOM element.

为什么会这样？

Answer 1

问题是cypress-vite使用我的vite.config来构建每个测试，而我的vite.config加载了试图编译整个代码库的插件（它也引用了node_modules ）。

为了修复它，我创建了一个名为vite.test.config.ts的新文件，其中包含用于 React 的最低 Vite 配置 + 对我的测试文件有用的别名：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@cypress': path.resolve(__dirname, './cypress'),
      '@src': path.resolve(__dirname, './src')
    }
  }
});

并将其作为cypress-vite中的参数引用：

// cypress.config.ts
export default defineConfig({
  ...
  setupNodeEvents(on) {
      on('file:preprocessor', vitePreprocessor(resolve(__dirname, './vite.test.config.ts')));
    },
})