SyntaxError: Support for the experimental syntax ‘decorators-legacy’ isn’t currently enabled

I’m working on an electron app, using React on the front end and I’m attempting to use Jest for testing. However, when I try to run tests I get the following error:

SyntaxError: C:UsersJimArmbrustersourcereposcyborg_cloud_explorercyborg_cloud_explorer_guisrcassetscustom_componentsstylesheetsbuttons.css: Support for the experimental syntax ‘decorators-legacy’ isn’t currently enabled (1:1):

> 1 | @import "../../fonts/fonts.css";
    | ^
  2 |
  3 | :root {
  4 |     --cyborgBlue: #65c8cc;

  at Parser._raise (node_modules/@babel/parser/src/parser/error.js:147:45)
  at Parser.raiseWithData (node_modules/@babel/parser/src/parser/error.js:142:17)
  at Parser.expectOnePlugin (node_modules/@babel/parser/src/parser/util.js:198:18)
  at Parser.parseDecorator (node_modules/@babel/parser/src/parser/statement.js:424:10)
  at Parser.parseDecorators (node_modules/@babel/parser/src/parser/statement.js:403:30)
  at Parser.parseStatement (node_modules/@babel/parser/src/parser/statement.js:228:12)
  at Parser.parseBlockOrModuleBlockBody (node_modules/@babel/parser/src/parser/statement.js:966:25)
  at Parser.parseBlockBody (node_modules/@babel/parser/src/parser/statement.js:942:10)
  at Parser.parseProgram (node_modules/@babel/parser/src/parser/statement.js:117:10)
  at Parser.parseTopLevel (node_modules/@babel/parser/src/parser/statement.js:102:25)

I realize this question has been asked many times before but the most common solution is to add “[“@babel/plugin-proposal-decorators”, { “legacy”: true }]” to the plugins section of my .babelrc file. Unfortunately that hasn’t resolved the issue.

Here’s my package.json file:

  "name": "cyborg_cloud_explorer",
  "version": "0.2.7",
  "homepage": "./",
  "author": "Cyborg Inc.",
  "description": "Searchable, end-to-end encrypted cloud storage manager powered by Cyborg Stealth.",
  "main": "public/electron.js",
  "scripts": {
    "start": "electron .",
    "prestart": "npm run build",
    "pack": "electron-builder --dir",
    "dev": "concurrently "npm run start-browser" "wait-on http://localhost:3000 && electron ."",
    "start-browser": "react-scripts start",
    "eject": "react-scripts eject",
    "ebuild": "npm run build && /node_modules/.bin/build",
    "build": "react-scripts build",
    "dist": "electron-builder",
    "test": "jest __tests__/ --coverage",
    "marge": "marge report.json",
    "electron-dev": "concurrently "BROWSER=none npm start" "wait-on http://localhost:3000 && electron ."",
    "electron-pack": "build --em.main=build/electron.js",
    "preelectron-pack": "npm run build"
  },
  "dependencies": {
    "@material-ui/core": "^4.12.3",
    "aws4": "^1.11.0",
    "axios": "^0.21.1",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-preset-env": "^1.7.0",
    "base32": "0.0.6",
    "convert-csv-to-json": "^1.3.1",
    "convert-excel-to-json": "^1.7.0",
    "dotenv": "^10.0.0",
    "ffi-napi": "^3.0.1",
    "franc-min": "^5.0.0",
    "hyperquest": "^2.1.3",
    "jssha": "^3.2.0",
    "keytar": "^6.0.1",
    "mammoth": "^1.4.17",
    "mochawesome-report-generator": "^5.1.0",
    "ndjson": "^2.0.0",
    "nibbler": "^0.2.0",
    "node-addon-api": "^3.1.0",
    "node-html-parser": "^3.3.6",
    "node-machine-id": "^1.1.12",
    "node-tika": "0.0.1",
    "react-beautiful-dnd": "^13.1.0",
    "react-file-icon": "^1.0.0",
    "react-hotkeys-hook": "^3.4.0",
    "react-scripts": "^4.0.3",
    "ref-napi": "^2.1.2",
    "ref-struct-napi": "^1.1.1",
    "version": "^0.1.2",
    "xml2js": "^0.4.23"
  },
  "devDependencies": {
    "@babel/core": "^7.1.0",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-proposal-decorators": "^7.1.0",
    "@babel/plugin-transform-object-assign": "^7.1.0",
    "@babel/plugin-transform-runtime": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.1.0",
    "babel-loader": "^8.1.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "chai": "^4.2.0",
    "chai-as-promised": "^7.1.1",
    "concurrently": "^6.0.2",
    "dotenv": "^10.0.0",
    "electron": "^9.4.3",
    "electron-builder": "^22.9.1",
    "electron-builder-squirrel-windows": "^22.10.4",
    "electron-chromedriver": "^11.0.0",
    "eslint": "^7.17.0",
    "jest": "^26.6.0",
    "mocha": "^8.2.1",
    "mochawesome": "^6.2.1",
    "node-key-sender": "^1.0.11",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-redux": "^7.2.4",
    "react-router-dom": "^5.2.0",
    "selenium-webdriver": "^4.0.0-beta.1",
    "spectron": "^11.1.0",
    "spectron-keys": "0.0.1",
    "wait-on": "^5.3.0"
  },
  "build": {
    "productName": "Cyborg Cloud Explorer",
    "artifactName": "CloudExplorer",
    "compression": "normal",
    "forceCodeSigning": false,
    "copyright": "Copyright 2020 Cyborg Inc., all rights reserved.",
    "asarUnpack": [
      "assets/cyborg_cloud_engine/linux/x64/cyborg_cloud_engine.so"
    ],
    "extraResources": [
      "assets/vs_redist/*"
    ],
    "files": [
      "src/assets/fonts/**/*",
      "src/assets/media",
      "src/assets/dictionaries",
      "src/assets/cyborg_cloud_engine",
      "src/pages/**/*",
      "src/*",
      "build/**/*"
    ],
    "directories": {
      "buildResources": "assets"
    },
    "win": {
      "target": "squirrel",
      "icon": "src/assets/media/cyborg.ico"
    },
    "linux": {
      "target": "AppImage",
      "icon": "./assets/media/256x256.png",
      "executableName": "CloudExplorer",
      "category": "Network",
      "appId": "Cyborg.Cloud.Explorer"
    },
    "mac": {
      "target": "dmg",
      "icon": "./assets/media/cyborg.icns",
      "appId": "com.cloud.explorer",
      "category": "public.app-category.business"
    },
    "squirrelWindows": {
      "iconUrl": "https://cyborg-cloud-explorer-assets.s3.amazonaws.com/cyborg.ico",
      "loadingGif": "src/assets/media/installing_cyborg_cloud.gif"
    }
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

And my .babelrc file:

    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": [
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        ["@babel/plugin-proposal-class-properties", { "loose": true }]
    ]
}```

Answer

Jest won’t use the babel plugins out of the box, you need to install some additional packages.

With yarn:

yarn add --dev babel-jest babel-core regenerator-runtime

With npm:

npm install babel-jest babel-core regenerator-runtime --save-dev

Jest should then pick up the configuration from your .babelrc or babel.config.js.

Source: https://archive.jestjs.io/docs/en/23.x/getting-started.html#using-babel