vuejs / vue-jest

Jest Vue transformer
MIT License
746 stars 157 forks source link

Import component in a sibling package #367

Closed RobWalker closed 3 years ago

RobWalker commented 3 years ago
    "jest": "^27.0.6",
    "ts-jest": "^27.0.3",
    "vue3-jest": "^27.0.0-alpha.1",

I have a mono-repo with linked packages and am trying to run tests on the leaf package which relies on components from the linked package.

The test includes a component:

import Sidebar                        from '@editor/components/editor/sidebar/Sidebar.vue';

which produces an error:

    Details:

    /home/rwalker/auctria/auctria-v4/frontend/packages/auctria-v4-editor/src/components/editor/sidebar/Sidebar.vue:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { defineComponent } from "vue";
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

Running tests within the editor project itself, including this component works fine.

The @editor is defined via the moduleNameMapper as:

    '^@editor/(.*)$': '<rootDir>/../auctria-v4-editor/src/$1'

How do I tell jest / vue-jest to handle this case correctly?

Thanks.

RobWalker commented 3 years ago

FWIW and for future Google hits, it looks like adding a babel.config.js to the project with the content:

module.exports = {
  presets: ['@babel/preset-env'],
}

Seems to have resolved this.

Frontend tooling configuration feels like magic a lot of the time!