vue-cli jest setting problems when npm run serve

Question

After I installed jest, setup babel, eslint, jest-setup and etc then I checked jest works fine.
But when I npm run serve(vue-clie-service serve), It includes test folders(__test __/abc.spec.js).
I would like to exclude all files below __test __ direcotry when npm run serve.

It occurs error now jest is not defined. describe is note defined...

#jest.config.js

module.exports = {
  moduleFileExtensions: [
    "js",
    "json",
    "vue",
  ],

  transform: {
    ".*\\.(vue)$": "vue-jest",
    "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
    ".+\\.(css|styl|less|sass|scss)$": "jest-transform-css",
  },

  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1",
    "\\.(css|less|scss|sass)$": "identity-obj-proxy",
  },

  transformIgnorePatterns: ["<rootDir>/node_modules/"],
  collectCoverage: false,
  collectCoverageFrom: ["**/*.{js,vue}", "!**/node_modules/**"],
  coverageReporters: ["html", "text-summary"],

  testMatch: [
    "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
    "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}",
  ],

  setupFilesAfterEnv: ["<rootDir>/jest-setup.js"],
  preset: "@vue/cli-plugin-unit-jest",
};

# main.js

import Vue from "vue";
import "./plugins/axios";
import App from "./App";
import router from "./router";
import store from "./store";
import i18n from "./plugins/i18n";
import vuetify from "./plugins/vuetify";
import "@/assets/styles/_global.scss";
import "@babel/polyfill";

Vue.config.productionTip = false;


new Vue({
  i18n,
  router,
  store,
  vuetify,
  render: h => h(App),
}).$mount("#app");

# vue.config.js
const path = require("path");
const ansiRegex = require("ansi-regex");

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: process.env.VUE_APP_TARGET,
        changeOrigin: true,
      },
    },
  },
  configureWebpack: {
    resolve: {
      alias: {
        "@": path.join(__dirname, "src/"),
      },
    },
  },
  css: {
    loaderOptions: {
      scss: {
        prependData: "@import \"@/assets/styles/_global.scss\";",
      },
    },
  },
  transpileDependencies: [
    "vuetify",
    ansiRegex,
  ],
};

Answer 1

i try to help you but could you share jest.config.js or another config file.

Could you try this code on config file.

Attention: You must edit your folder path and if you don't use Typescript, you delete ts and tsx.

#jest.config.js
module.exports = {
  preset: 'ts-jest',
  verbose: true,
  collectCoverage: true,
  collectCoverageFrom: [
    '**/*.{ts,vue}',
    '!**/node_modules/**',
    '!**/vendor/**'
  ],
  coverageReporters: [
    'json', 'lcov', 'text'
  ],
  moduleFileExtensions: [
    'js',
    'jsx',
    'json',
    'vue',
    'ts',
    'tsx'
  ],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '^.+\\.tsx?$': 'ts-jest',
    '^.+\\.ts?$': 'ts-jest',
    '^.+\\.jsx?$': 'babel-jest',
    '^.+\\.js?$': 'babel-jest'
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '^@/application/(.*)$': '<rootDir>/src/application/$1',
    '^@/common/(.*)$': '<rootDir>/src/common/$1',
    '^@/components/(.*)$': '<rootDir>/src/components/$1'
  },
  transformIgnorePatterns: [
    '/node_modules/(?!(tiny-slider)/(.*)$)'
  ],
  snapshotSerializers: [
    'jest-serializer-vue'
  ],
  testMatch: [
    '**/src/**/*.spec.(js|jsx|ts|tsx)',
    '**/src/application/**/*.spec.(js|jsx|ts|tsx)',
    '**/src/common/**/*.spec.(js|jsx|ts|tsx)',
    '**/src/components/**/*.spec.(js|jsx|ts|tsx)',
    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)'
  ],
  testURL: 'http://localhost:8080/'
}