Vue2/Jest throwing Unexpected Token error

Question

Relatively new to SO, so please bear with me.

Working on a project using Vue2, And Design, and Jest/Vue-Test-Utils as the primary packages. Been writing tests and recently ran into an issue after refactoring some of my codebase. Jest just randomly started throwing Unexpected Token errors on 3 out of my 19 test suites and I can't determine what the root problem is.

Here is the error:

Test suite failed to run

Jest encountered an unexpected token

Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard   JavaScript syntax, or when Jest is not configured to support such syntax. 
Out of the box Jest supports Babel, which will be used to transform your files into valid JS based 
on your Babel configuration.

By default "node_modules" folder is ignored by transformers.

Here's what you can do:
 • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
 • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation

Details:

C:\Users\Aric\project\frontend\node_modules\ant-design-vue\dist\antd.css:15      
body {
     ^

SyntaxError: Unexpected token '{'

  1 | import Vue from "vue";
  2 | import Antd from "ant-design-vue";
> 3 | import "ant-design-vue/dist/antd.css";
    | ^
  4 |
  5 | Vue.use(Antd);
  6 |

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1495:14)
  at Object.<anonymous> (src/plugins/ant.js:3:1)
  at Object.<anonymous> (src/main.js:8:1)
  at Object.<anonymous> (src/components/generators/New_Placements.vue:159:1)
  at Object.<anonymous> (tests/unit/components/inputs/workflowButtons.spec.js:308:1)

The file it references is just my import for Antd here:

import Vue from "vue";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";

Vue.use(Antd);

Here is my Jest.config.js:

module.exports = {
  testTimeout: 30000,
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1",
  },
  transform: {
    "^.+\\.vue$": "@vue/vue2-jest", 
    "^.+\\.(js|jsx)?$": "babel-jest",
  },
  testEnvironment: "jsdom",
  transformIgnorePatterns: [
    "/node_modules/(?!(@vue-material-design-icons)).+\\.js$",
  ],
  setupFilesAfterEnv: ["./tests/testHelpers/crypto.js", "jest-canvas-mock"],
};

I've tried editing my jest.config.js such as adding to my transformIgnorePatterns but what I tried didn't work. I've also seen some people mention editing the babel.config.js with a plugin but I'm unsure what try. I've also tried here. Adding to moduleNameMapper to stub the CSS seems to break the entire test more. And adding Identity-obj-proxy caused the same issue.

Vue2/Jest throwing Unexpected Token error

0 Answers0