npm 运行 serve 时 vue-cli jest 设置问题

Question

在我安装 jest、设置 babel、eslint、jest-setup 等之后，我检查 jest 工作正常。
但是当我 npm 运行 serve(vue-clie-service serve) 时，它包括测试文件夹(__test __/abc.spec.js)。
我想排除 __test 以下的所有文件 __ direcotry when npm 运行 serve.

它发生错误，现在 jest 未定义。 describe 是注释定义的...

#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/",
    "\.(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

我尽力帮助你，但你可以分享 jest.config.js 或其他配置文件吗？

你能在配置文件上试试这段代码吗？

注意：您必须编辑文件夹路径，如果您不使用 Typescript，请删除 ts 和 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/',
    '^@/application/(.*)$': '<rootDir>/src/application/',
    '^@/common/(.*)$': '<rootDir>/src/common/',
    '^@/components/(.*)$': '<rootDir>/src/components/'
  },
  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/'
}

npm 运行 serve 时 vue-cli jest 设置问题

vue-cli jest setting problems when npm run serve

unit-testing

vue.js

jestjs

vue-cli

vue-cli-3