Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Random errors when running test with jest CLI #6

Open
eXodes opened this issue Jul 10, 2021 · 0 comments
Open

Random errors when running test with jest CLI #6

eXodes opened this issue Jul 10, 2021 · 0 comments

Comments

@eXodes
Copy link

eXodes commented Jul 10, 2021

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'
@eXodes eXodes changed the title Unable to run test with @testing-library Random errors when running test with jest CLI Jul 11, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant