Using jest and vue throw SyntaxError: Unexpected identifier error for import

Question

I'm new to jest and I'm using vue3 and jest 26.6.3 in my project

//pachage.json

"jest": {
  "moduleFileExtensions": [
    "js",
    "json",
    "vue"
  ],
  "moduleNameMapper": {
    "^@/(.*)$": "<rootDir>/src/$1",
    "^vue$": "vue/dist/vue.common.js"
  },
  "transform": {
    ".*\\.(vue)$": "<rootDir>/jest/jest-vue",
    ".*": "babel-jest"
  }
},

I create a jest-vue file and the content is

// jest/jest-vue.js

const templateRegex = /<template>([\s\S]*)<\/template>/gm;
const scriptRegex = /<script>([\s\S]*)<\/script>/gm;
const babelJest = require("babel-jest");

module.exports = {
  process(src, filepath, config, transformOptions) {
    templateRegex.lastIndex = scriptRegex.lastIndex = 0;
    const template = templateRegex.exec(src)[1];
    return `${babelJest.process(
      scriptRegex.exec(src)[1],
      filepath + ".js",
      config,
      transformOptions
    )};
        exports.default['template']=\`${template}\`;
        `;
  },
};

// app.spec.js

import App from "@/App.vue";

describe('App', () => {
  // Inspect the raw component options
  it("has data", () => {
    expect(typeof App.data).toBe("function");
  });
});

after I run yarn test I'm getting this error

({"Object.":function(module,exports,require,__dirname,__filename,global,jest){[object Object];
SyntaxError: Unexpected identifier

> 1 | import App from "@/App.vue";

if you need to see my code here is the github repo

Mic Fung · Accepted Answer · 2021-05-19 07:31:06Z

1

I think the jest is missing the connection with Vue.

try installing vue-jest, Must include @next

yarn add vue-jest@next

using vue-test to do the code transformation of .vue file

"jest": {
    "moduleFileExtensions": [
        "js",
        "json",
        "vue"
    ],
    "moduleNameMapper": {
        "^@/(.*)$": "<rootDir>/src/$1"
    },
    "transform": {
        "^.+\\.vue$": "vue-jest", 
        "^.+\\.js$": "babel-jest"
    }
},

and you should be good to go

answered May 19, 2021 at 7:31

Mic Fung

5,7102 gold badges13 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using jest and vue throw SyntaxError: Unexpected identifier error for import

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related