Random errors when running test with jest CLI

[eXodes]

I wanted to use vite-jest as my test running with @testing-library/user-event and the test runner run into an error, sometimes, on certain mode.

A little background, my setup is running Vue 3 using Vite as well as Storybook with Vite builder.

Configurations

jest.config.ts

import type { Config } from "@jest/types";

const config: Config.InitialOptions = {
  preset: "vite-jest",
  testMatch: ["**/src/components/**/*.spec.ts?(x)"],
  testEnvironment: "jest-environment-jsdom",
  collectCoverageFrom: ["**/src/components/**/*.vue"],
  setupFilesAfterEnv: ["<rootDir>/src/jest-setup.ts"],
  watchman: false,
};

export default config;

tsconfig.json

{
  "compilerOptions": {
    "target": "es2020",
    "module": "esnext",
    "lib": [
      "esnext",
      "dom",
      "dom.iterable"
    ],
    "allowJs": true,
    "checkJs": true,
    "jsx": "preserve",
    "declaration": true,
    "sourceMap": true,
    "removeComments": true,
    "importHelpers": true,
    "strict": true,
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
  },
  "typeAcquisition": {
    "enable": true
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "src/**/*.mdx",
    "src/jest-setup.ts"
  ],
  "exclude": [
    "node_modules",
    ".storybook"
  ]
}

jest-setup.ts

import "@testing-library/jest-dom";

package.json

{
  "name": "design-system",
  "version": "0.0.0",
  "files": [
    "dist"
  ],
  "main": "./dist/my-lib.umd.js",
  "module": "./dist/my-lib.es.js",
  "exports": {
    ".": {
      "import": "./dist/my-lib.es.js",
      "require": "./dist/my-lib.umd.js"
    }
  },
  "scripts": {
    "dev": "vite",
    "storybook": "start-storybook --ci --no-manager-cache -p 6006",
    "storybook:docs": "start-storybook --ci --docs --no-manager-cache -p 6006",
    "lint": "eslint --ignore-path .gitignore .",
    "lint:fix": "eslint --fix --ignore-path .gitignore .",
    "build:library": "vue-tsc --noEmit && vite build",
    "build:storybook": "build-storybook --docs --loglevel verbose --output-dir docs",
    "test": "vite-jest",
    "test:clear": "vite-jest --no-cache",
    "test:watch": "vite-jest --watch ",
    "test:coverage": "vite-jest --coverage",
    "test:debug": "vite-jest --detectOpenHandles",
  },
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@storybook/addon-a11y": "^6.3.0",
    "@storybook/addon-actions": "^6.3.0",
    "@storybook/addon-essentials": "^6.3.0",
    "@storybook/addon-links": "^6.3.0",
    "@storybook/testing-vue3": "0.0.1",
    "@storybook/vue3": "^6.3.0",
    "@tailwindcss/aspect-ratio": "^0.2.1",
    "@tailwindcss/forms": "^0.3.3",
    "@tailwindcss/line-clamp": "^0.2.1",
    "@tailwindcss/typography": "^0.4.1",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/user-event": "^13.1.9",
    "@types/jest": "^26.0.24",
    "@typescript-eslint/eslint-plugin": "^4.28.0",
    "@typescript-eslint/parser": "^4.28.0",
    "@vitejs/plugin-vue": "^1.2.3",
    "@vue/compiler-sfc": "^3.0.5",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "autoprefixer": "^10.2.6",
    "babel-loader": "^8.2.2",
    "eslint": "^7.29.0",
    "eslint-config-prettier": "^6.15.0",
    "eslint-plugin-jest-dom": "^3.9.0",
    "eslint-plugin-mdx": "^1.13.0",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-tailwindcss": "^1.13.4",
    "eslint-plugin-vue": "^7.12.1",
    "jest": "^27.0.6",
    "jest-environment-jsdom": "^27.0.6",
    "postcss": "^8.3.5",
    "postcss-preset-env": "^6.7.0",
    "prettier": "^2.3.1",
    "storybook-builder-vite": "^0.0.9",
    "tailwindcss": "^2.2.2",
    "ts-node": "^10.1.0",
    "typescript": "^4.3.4",
    "vite": "^2.3.8",
    "vite-jest": "0.0.2",
    "vue-loader": "^16.2.0",
    "vue-tsc": "^0.0.24"
  },
  "dependencies": {
    "@testing-library/vue": "^6.4.2",
    "vue": "^3.1.2",
    "vue-demi": "^0.9.1"
  },
}

What doesn't works?

When storybook is running, I encounter these errors, for all my test commands.

  ● Test suite failed to run

    Cannot find module '/Users/macOS/Documents/Projects/design-system/node_modules/.vite/@testing-library_jest-dom.js' from 'src/jest-setup.ts'

      at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:311:11)

After I shut down storybook, i ran it again.

npm run test

On first run, I got the same errors as above.

npm run test:watch or npm run test:coverage

    Cannot find module '/Users/macOS/Documents/Projects/design-system/node_modules/.vite/@storybook_testing-vue3.js' from 'src/components/atoms/base-button/base-button.spec.ts'

      at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:311:11)

npm run test:clear

I got these errors, no matter how many times i ran this command.

  ● Base Button › Should not be clickable when loading

    TypeError: userEvent.tab is not a function

What works?

After running npm run test:clear once, I can run the test npm run test:watch or npm run test:coverage but npm run test return this same error above.

    Cannot find module '/Users/macOS/Documents/Projects/design-system/node_modules/.vite/@storybook_testing-vue3.js' from 'src/components/atoms/base-button/base-button.spec.ts'