SyntaxError: Cannot use import statement outside a module when following vue-test-utils official tutorial

Question

I can't get vue testing to work with vue-test-utils and jest. I created a clean new project with vue cli and added jest as follows, maybe someone can follow along and tell me what I'm doing wrong. (I'm following this installation guide: https://vue-test-utils.vuejs.org/installation/#semantic-versioning)

vue create jest-test

1.1. npm install
npm install --save-dev jest @vue/test-utils vue-jest

Added jest config to package.json:

{
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transform": {
      ".*\\.(vue)$": "vue-jest"
    }
  }
}

npm install --save-dev babel-jest @babel/core @babel/preset-env babel-core@^7.0.0-bridge.0

Adjusted jest config to:

{
  "jest": {
    "transform": {
      // process `*.js` files with `babel-jest`
      ".*\\.(js)$": "babel-jest" //<-- changed this
    }
  }
}

Adjusted babel config to:

module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset',
        '@babel/preset-env' //<-- added this
    ]
};

Created example.test.js in a tests directory under the project root (jest-test/tests)

Added the following to this file:

import { mount } from '@vue/test-utils'
import HelloWorld from "@/components/HelloWorld";


test('displays message', () => {
    const wrapper = mount(HelloWorld)

    expect(wrapper.text()).toContain('Welcome to Your Vue.js App')
})

Added the following to the package.json scripts: "jest": "jest"
npm run jest

Get the following error:

C:\Users\xxx\jest-test\tests\example.test.js:1
    import { mount } from '@vue/test-utils'
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

Same happens with Mocha or if I try it in an existing project. Is this a bug? I can't get it working, no matter what I do.

Edit: If I do it with Vue CLI, it works https://vue-test-utils.vuejs.org/installation/#installation-with-vue-cli-recommended

Ferry Kranenburg · Accepted Answer · 2021-08-03 18:40:17Z

2

You need to transform both *.vue files and *.js files. I tried your setup and could reproduce the issue. But after altering jest.config.js to the following, the tests will run fine:

module.exports = {
  "moduleFileExtensions": [
    "js",
    "json",
    "vue"
  ],
  transform: {
    '.*\\.js$':'babel-jest',
    ".*\\.(vue)$": "vue-jest"
  },
  moduleNameMapper: {
    "@/(.*)": "<rootDir>/src/$1",
  },
  testEnvironment: 'jsdom'
}

answered Aug 3, 2021 at 18:40

Ferry Kranenburg

2,6351 gold badge19 silver badges24 bronze badges

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

3 Comments

beeftony Over a year ago

This solved it! Thank you! So can you agree with me that the official documentation doesn't work when you follow the steps 1to1? Because this part: ".*\\.js$":"babel-jest" is not in the docs and even if this is not Vue.js specific, their tutorial doesn't work without it.

beeftony Over a year ago

My test project was fixed with this. In my "real" project I get the following error: ReferenceError: axios is not defined. I thought this was fixable by adding "axios" to the transformIgnorePatterns array. That did work but resulted in anohter error: ReferenceError: regeneratorRuntime is not defined. This one doesn't get solved if I add it to the array. Even if I set the array to empty: transformIgnorePatterns: [], (so all packages are considered) the error remains. Can you help me with this as well?

Ferry Kranenburg Over a year ago

I'm not sure about the official documentation. I think this works because I use 'jsdom' as the testEnvironment. For axios I always mock requests. You could use a solution like github.com/knee-cola/jest-mock-axios.

Collectives™ on Stack Overflow

SyntaxError: Cannot use import statement outside a module when following vue-test-utils official tutorial

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related