Vitest run times very slow on a AWS T3.xlarge instance vs Jest with same configuration

[alireza-salemi]

Describe the bug

Hello,

I am writing because I see high collection times when I run our 1100 React tests with Vitest in docker on AWS T3.xlarge instance.

On my local environment I get the following metrics on Macbook Pro M1 (8 CPUs). The test run takes here only 130 seconds.

• (transform 4.35s, setup 104.18s, collect 732.06s, tests 33.56s, environment 78.92s, prepare 65.57s)

In Docker on AWS T3.xlarge instance (4CPU) I see the following. The test run takes 680 seconds. Why is the collect number os high?

• (transform 37.93s, setup 542.42s, collect 3018.78s, tests 305.97s, environment 359.46s, prepare 254.38s)�

In Docker on AWS T3.xlarge instance (4CPU) using Jest. The test run takes 495 seconds.

Any Idea why this would happen?

PS:

I am using the following versions:

    "vitest": "^1.5.2",
    "vitest-canvas-mock": "^0.3.3",
    "vitest-fetch-mock": "^0.2.2"

I use the following setting in package.json to run the test on the AWS machine and I have tried pool=theads but it gets slower!
CI=true vitest run --coverage.enabled=true --pool=forks --minWorkers=8 --maxWorkers=8

Below is my vitets.config.ts file

import react from '@vitejs/plugin-react';
import {defineConfig} from 'vitest/config';

export default defineConfig({
  plugins: [react()],
  test: {
    css: true,
    environment: 'jsdom',
    globals: true,
    include: ['**/*.{test,spec}.[t]s?(x)'],
    reporters: process.env.CI ? ['default', 'junit'] : ['default'],
    root: './src',
    outputFile: {
      junit: process.env.CI ? `${__dirname}/reports/junit.xml` : `${__dirname}/coverage/junit.xml`
    },
    setupFiles: 'setupTests.js',
    snapshotSerializers: ['enzyme-to-json/serializer'],
    coverage: {
      provider: 'v8',
      processingConcurrency: 8,
      clean: false,
      reportsDirectory: process.env.CI ? `${__dirname}/reports` : `${__dirname}/coverage`,
      reporter: ['text', 'cobertura'],
      extension: ['.ts', '.tsx'],
      exclude: [
        '**/*.d.ts',
        '**/node_modules/**',
        '**/vendor/**',
        'src/store/lookerQueries/queries/**.ts',
        'src/components/chart/**'
      ]
    }
  }
});

setup.js

looks like the following:

import '@testing-library/jest-dom';
import {configure} from 'enzyme';
import Adapter from '@cfaester/enzyme-adapter-react-18';
import 'jest-styled-components';
import createFetchMock from 'vitest-fetch-mock';
import IntlPolyfill from 'intl';
import 'intl/locale-data/jsonp/pt';
import 'vitest-canvas-mock';
import {vi} from 'vitest';
import {cleanup} from '@testing-library/react';

afterEach(() => {
  vi.clearAllMocks();
  cleanup();
});

global.jest = vi;

configure({adapter: new Adapter()});

const localStorageMock = {
  getItem: vi.fn(),
  setItem: vi.fn(),
  clear: vi.fn()
};
const sessionStorageMock = {
  getItem: vi.fn(),
  setItem: vi.fn(),
  clear: vi.fn()
};

global.localStorage = localStorageMock;
global.sessionStorage = sessionStorageMock;
Object.defineProperty(window, 'location', {
  value: {...window.location, reload: vi.fn()}
});

if (window.document) {
  window.document.createRange = () => ({
    setStart: () => {},
    setEnd: () => {},
    commonAncestorContainer: {
      nodeName: 'BODY',
      ownerDocument: document
    }
  });
}

global.Blob = function (content, options) {
  return {content, options};
};

global.Intl = IntlPolyfill;
if (global.Intl.__disableRegExpRestore) {
  global.Intl.__disableRegExpRestore();
}

global.google = {
  maps: {
    Size: class {
      constructor(width, height) {}
    },
    ImageMapType: class {
      constructor(options) {}
    },
    LatLng: class {
      constructor(lat, lng) {
        this.lat = lat;
        this.lng = lng;
      }
    },
    Point: class {
      constructor(x, y) {
        this.x = x;
        this.y = y;
      }
    },
    OverlayView: class {
      constructor() {}
      getPanes() {}
      getProjection = () => ({
        // Note: This simple (and incorrect) mapping is only for testing purposes
        fromLatLngToDivPixel: ({lat, lng}) => ({x: lng, y: lat}),
        fromContainerPixelToLatLng: ({x, y}) => ({lng: x, lat: y})
      });
      setMap(map) {}
      static preventMapHitsAndGesturesFrom(ref) {}
    }
  }
};

const fetchMocker = createFetchMock(vi);
fetchMocker.enableMocks();

Reproduction

I have 1111 test and I am not able to reproduce this in smaller scale

System Info

System:
    OS: macOS 12.5
    CPU: (10) arm64 Apple M1 Max
    Memory: 5.93 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.18.0 - ~/.nvm/versions/node/v18.18.0/bin/node
    npm: 9.8.1 - ~/.nvm/versions/node/v18.18.0/bin/npm
  Browsers:
    Chrome: 124.0.6367.119
    Safari: 15.6

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.