vue-cli jest setting problems when npm run serve - unit-testing

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/'
}