升级玩笑之后，“ [BABEL] .value不是有效的插件属性”

Question

我将应用程序与webpacker（rails gem），vue，打字稿，笑话一起使用。我也使用ts-jest。当我将玩笑从24.8.0升级到24.9.0时，如果尝试运行任何测试，就会遇到此错误：

 FAIL  app/javascript/apis/__tests__/emails.spec.ts
  ● Test suite failed to run

    [BABEL] jest_setup.ts: .value is not a valid Plugin property

      at Object.keys.forEach.key (node_modules/babel-jest/node_modules/@babel/core/lib/config/validation/plugins.js:52:56)
          at Array.forEach (<anonymous>)
          at Array.reduce (<anonymous>)

我不确定是什么原因导致此错误。你有什么建议吗？

jest.config.js

module.exports = {
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
  modulePathIgnorePatterns: ["<rootDir>/.*/__mocks__"],
  setupFiles: ["<rootDir>/jest_setup.ts", "jest-date-mock"],
  moduleDirectories: ["node_modules", "<rootDir>/app/javascript"],
  transform: {
    "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
    ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest",
    "^.+\\.tsx?$": "ts-jest",
  },
  testRegex: "/__tests__/.*\\.(ts|tsx|js)$",
  transformIgnorePatterns: ["node_modules/(?!bootstrap-vue|epic-spinners)"],
  snapshotSerializers: ["<rootDir>/node_modules/jest-serializer-vue"],
  testPathIgnorePatterns: ["<rootDir>/app/assets", "<rootDir>/config/webpack/test.js", "<rootDir>/vendor"],
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/app/javascript/$1",
    "\\.(css|less)$": "identity-obj-proxy",
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
      "<rootDir>/app/javascript/__mocks__/fileMock.js",
  },
  restoreMocks: true,
  globals: {
    "ts-jest": {
      tsConfig: "tsconfig.jest.json",
      babelConfig: true,
      diagnostics: false,
    },
  },
};

jest_setup.ts

import "babel-polyfill"; // for async/await
import "mutationobserver-shim" // for bootstrap-vue + mount
import Vue from "vue";
import PusherMock from "./app/javascript/__mocks__/pusher-js-mock";
import $ from "jquery";

(window as any).PusherVue = new PusherMock();
(global as any).$ = (global as any).jQuery = $;
(window as any).$ = $;

Vue.config.productionTip = false;
Vue.config.devtools = false
Vue.config.ignoredElements = [
  "b-button",
  // ...
];

package.json

{
  "engines": {
    "node": "11.14.0",
    "npm": "6.9.0",
    "yarn": "1.15.2"
  },
  "dependencies": {
    "@rails/webpacker": "^4.0.7",
    "@types/ckeditor": "^4.9.5",
    "@types/jquery": "^3.3.30",
    "@types/lodash": "^4.14.136",
    "@types/node": "^12.6.8",
    "@types/pusher-js": "^4.2.2",
    "@types/qs": "^6.5.3",
    "@types/rosie": "^0.0.36",
    "axios": "^0.19.0",
    "babel-loader": "^8.0.6",
    "babel-polyfill": "^6.26.0",
    "babel-preset-vue": "^2.0.2",
    "bootstrap": "^4.3.1",
    "bootstrap-vue": "^2.0.0-rc.26",
    "coffeelint": "^2.1.0",
    "date-fns": "^2.1.0",
    "es6-promise": "^4.2.8",
    "immutable": "^4.0.0-rc.12",
    "jquery": "^3.4.1",
    "lodash": "^4.17.14",
    "mutationobserver-shim": "^0.3.3",
    "nodelist-foreach-polyfill": "^1.2.0",
    "pusher-js": "^4.3.1",
    "qs": "^6.6.0",
    "rosie": "^2.0.1",
    "ts-loader": "^6.0.4",
    "typescript": "^3.6.3",
    "vee-validate": "^2.2.13",
    "vue": "^2.6.10",
    "vue-class-component": "^7.1.0",
    "vue-clipboard2": "^0.3.0",
    "vue-ctk-date-time-picker": "^2.1.1",
    "vue-jcrop": "^1.0.3",
    "vue-loader": "^15.7.1",
    "vue-notification": "^1.3.14",
    "vue-property-decorator": "^8.2.2",
    "vue-template-compiler": "^2.6.10",
    "vuex": "^3.1.1",
    "vuex-class": "^0.3.1"
  },
  "devDependencies": {
    "@babel/plugin-transform-modules-commonjs": "^7.5.0",
    "@types/jest": "^24.0.15",
    "@vue/test-utils": "^1.0.0-beta.28",
    "babel-eslint": "^10.0.2",
    "babel-jest": "^24.8.0",
    "eslint": "^5.16.0",
    "eslint-config-airbnb-base": "^13.2.0",
    "eslint-config-prettier": "^6.0.0",
    "eslint-import-resolver-webpack": "^0.11.1",
    "eslint-plugin-import": "^2.18.0",
    "eslint-plugin-jest": "^22.10.0",
    "eslint-plugin-prettier": "^3.1.0",
    "eslint-plugin-vue": "^5.2.3",
    "flush-promises": "^1.0.2",
    "identity-obj-proxy": "^3.0.0",
    "ignore-loader": "^0.1.2",
    "jest": "^24.9.0",
    "jest-date-mock": "^1.0.7",
    "jest-serializer-vue": "^2.0.2",
    "lint-staged": "^9.2.0",
    "moxios": "^0.4.0",
    "pre-commit": "^1.2.2",
    "prettier": "^1.18.2",
    "stylelint": "^10.1.0",
    "stylelint-config-standard": "^18.3.0",
    "stylelint-scss": "^3.9.2",
    "ts-jest": "^24.1.0",
    "tslint": "^5.20.0",
    "tslint-loader": "^3.6.0",
    "vue-jest": "^4.0.0-beta.2",
    "webpack-dev-server": "^3.8.0"
  },
  "scripts": {
    "test": "jest",
    "lint-staged": "$(yarn bin)/lint-staged"
  },
  "lint-staged": {
    "app/javascript/**/*.js": [
      "prettier --write",
      "eslint",
      "git add"
    ],
    "app/javascript/**/*.ts": [
      "prettier --write",
      "tslint --fix",
      "git add"
    ],
    "app/javascript/**/*.vue": [
      "prettier --write",
      "stylelint --fix",
      "tslint --fix",
      "git add"
    ],
    "app/javascript/**/*.spec.js": [
      "prettier --write",
      "eslint",
      "git add"
    ],
    "app/javascript/**/*.spec.ts": [
      "prettier --write",
      "tslint",
      "git add"
    ],
    "app/assets/stylesheets/**/*": [
      "prettier --write",
      "stylelint --fix",
      "git add"
    ],
    "app/stylesheets/**/*.scss": [
      "prettier --write",
      "stylelint --fix",
      "git add"
    ],
    "app/javascript/**/*.scss": [
      "prettier --write",
      "stylelint --fix",
      "git add"
    ],
    "app/javascript/**/*.json": [
      "prettier --write",
      "git add"
    ],
    "*.js": [
      "prettier --write",
      "eslint",
      "git add"
    ]
  },
  "pre-commit": [
    "lint-staged"
  ]
}

babel.config.js

module.exports = function(api) {
  const validEnv = ["development", "test", "production"];
  const currentEnv = api.env();
  const isDevelopmentEnv = api.env("development");
  const isProductionEnv = api.env("production");
  const isTestEnv = api.env("test");

  if (!validEnv.includes(currentEnv)) {
    throw new Error(
      "Please specify a valid `NODE_ENV` or " + 
        '`BABEL_ENV` environment variables. Valid values are "development", ' +
        '"test", and "production". Instead, received: ' +
        JSON.stringify(currentEnv) +
        ".",
    );
  }

  return {
    presets: [
      isTestEnv && [
        require("@babel/preset-env").default,
        {
          targets: {
            node: "current",
          },
        },
      ],
      (isProductionEnv || isDevelopmentEnv) && [
        require("@babel/preset-env").default,
        {
          forceAllTransforms: true,
          useBuiltIns: "entry",
          corejs: 3,
          modules: false,
          exclude: ["transform-typeof-symbol"],
          targets: {
            ie: "11",
          },
        },
      ],
    ].filter(Boolean),
    plugins: [
      require("babel-plugin-macros"),
      require("@babel/plugin-syntax-dynamic-import").default,
      isTestEnv && require("babel-plugin-dynamic-import-node"),
      require("@babel/plugin-transform-destructuring").default,
      [
        require("@babel/plugin-proposal-class-properties").default,
        {
          loose: true,
        },
      ],
      [
        require("@babel/plugin-proposal-object-rest-spread").default,
        {
          useBuiltIns: true,
        },
      ],
      [
        require("@babel/plugin-transform-runtime").default,
        {
          helpers: false,
          regenerator: true,
          corejs: false,
        },
      ],
      [
        require("@babel/plugin-transform-regenerator").default,
        {
          async: false,
        },
      ],
    ].filter(Boolean),
  };
};

Answer 1

已通过将babel-jest升级到与jest相同的版本进行修复：24.9.0