我将应用程序与 webpacker (rails gem)、vue、typescript、jest 一起使用。我也使用 ts-jest。当我将 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",
// ...
];
包.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),
};
};