SyntaxError: Cannot use import statement outside a module

[Mikilll94]

I have the following bug when running jest unit tests.

 FAIL  src/__tests__/App.spec.js
  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
     • 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/en/configuration.html

    Details:

    /Users/xyz/Desktop/vue-webpack-test/src/App.vue:8
    import HelloComponent from './components/HelloComponent.vue';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | import { mount } from '@vue/test-utils';
    > 2 | import App from '../App';
        | ^
      3 |
      4 | test('App has a .center-content class', () => {
      5 |     const app = mount(App);

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
      at Object.<anonymous> (src/__tests__/App.spec.js:2:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        2.004 s
Ran all test suites.

Here is the repro project:
vue-webpack-test.zip

To run unit tests in the project just execute:

npm install
npm run test

As you can see in the jest.config.js I am using vue-jest transform.

[joshhansen]

Are you by chance using Vue 3 and the next branch of vue-jest? I get something like this in that configuration.

[lmiller1990]

I will need a full repro to point you in the right direction. It's a config issue, not a vue-jest bug.

Edit: I see you provided a repo. thanks!

[lmiller1990]

Ah, the main version on npm is the old 3.x... this should be changed now 4.0.0 is finally out.

For now, you can update and it will work: yarn add vue-jest@4.0.1.

I tried in your repo and it worked. LMK if this is not working for you.

[Mikilll94]

@lmiller1990
Thanks. Updating to vue-jest 4.0.1 fixed my issue.

PS: You should add a notice that vue-jest 4.x requires jest 26.x

[lmiller1990]

I thought it was in the peerDeps?

If not, are you able to make a PR (either adding to peerDeps or README, or both?)

[Yan2603]

mark

[gcgarciab]

I am using vue3-jest and after some hours reading I have 3 good links

https://dev.to/vuesomedev/add-testing-to-vite-4b75
https://dev.to/imomaliev/creating-vite-vue-ts-template-setup-jest-5h1i
https://stackoverflow.com/questions/69647185/jest-vue3-vueform-slider-syntaxerror-cannot-use-import-statement-outside

I hope that could work for you too.

[k3yV1]

Hi, guys. I have the same problem but I`m using Vue 2. Could you tell me some admit how resolve this problem ?

[lmiller1990]

Please post a minimal reproduction if you want help.