npm run serve 时 vue-cli jest 设置问题

Posted 2023-02-22

【中文标题】npm run serve 时 vue-cli jest 设置问题

【英文标题】：vue-cli jest setting problems when npm run serve

【发布时间】：2020-04-08 14:53:29

【问题描述】：

在我安装 jest、设置 babel、eslint、jest-setup 等之后，我检查了 jest 工作正常。 但是当我 npm run serve(vue-clie-service serve) 时，它包括测试文件夹(__test __/abc.spec.js)。 我想排除 __test 下面的所有文件 __ npm run 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/$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,
  ],
;

【问题讨论】：

这不是 Webpack 的工作方式。它不只是覆盖所有文件，它使用一个通常为main.js 的入口文件。基本上，包含测试文件的唯一方法是您自己包含它们。

【参考方案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/$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/'

【讨论】：

@Daniel 谢谢。能否分享一下 vue.config.js 文件。

@Daniel，你能再试试这个代码吗？请记住，您必须使用文件夹路径编辑所有路径。

谢谢路径是问题。我的测试在 /views/auth/__tests__/~ 和 /store/modules/__tests__/~ 下面。在我将 /store/modules/__tests__ 移动到 /store/__tests__ 后，它可以正常工作。非常感谢。

@Daniel，很高兴能帮到你。