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,
  ],
};

That's not how Webpack works. It doesn't just glom all files, it uses an entry file which is typically main.js. Basically, the only way your test files are getting included is if you're including them yourself. — Phil
– Phil, Commented Dec 16, 2019 at 6:53

Yarkın ÜÇERLER · Accepted Answer · 2019-12-16 07:46:54Z

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

edited Dec 16, 2019 at 7:46

answered Dec 16, 2019 at 6:54

Yarkın ÜÇERLER

1145 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Yarkın ÜÇERLER Over a year ago

@Daniel thank you. Could you shared vue.config.js file please.

Yarkın ÜÇERLER Over a year ago

@Daniel, can you try this code again. Remember, You must edit all paths with your folder paths.

Daniel Over a year ago

Thank you path was the problem. my tests are below /views/auth/__tests__/~ and /store/modules/__tests__/~. After I move /store/modules/__tests__ to /store/__tests__ it working properly. Thank you so much.

Yarkın ÜÇERLER Over a year ago

@Daniel, I'm glad I could help you.

Collectives™ on Stack Overflow

vue-cli jest setting problems when npm run serve

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related