Vuetify: Jest Unit Test SyntaxError: Unexpected token import

[JeremyWalters]

Versions and Environment

Vuetify: 1.3.0
Vue: 2.5.17
OS: Windows 10

Previously worked in:

Vuetify: 1.2.10
Vue: 2.5.17

Steps to reproduce

Vue Create (typescript/Babel/Jest)
Vue Add vuetify (default)
Create jest test that involves any vuetify component

Expected Behavior

All my jest test should run

Actual Behavior

Get an error before test start to run:

location_to_project\node_modules\vuetify\lib\index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Vuetify from './components/Vuetify';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token import

      1 | import Vue from 'vue'
      2 | // @ts-ignore
    > 3 | import * as Vuetify from 'vuetify/lib'
        | ^
      4 | import 'vuetify/src/stylus/app.styl'
      5 |
      6 | Vue.use(Vuetify, {

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:4    7)
03:17)
      at Object.<anonymous> (src/plugins/vuetify.ts:3:1)

---

Additional Comments:

It is probable a babel transform issue with jest.

[KaelWD]

This is a problem with your test setup, it has nothing to do with vuetify.

[JeremyWalters]

@KaelWD Well it worked before 1.3.0

[johnleider]

I'm not sure how it could have worked, vuetify/lib wasn't a thing until v1.3

[JeremyWalters]

@johnleider I know. Before that I used

import {
    Vuetify,
    VApp,
    VAlert,
    VAutocomplete,
    VBtnToggle,
    VCheckbox,
        ....
} from "vuetify";

Which in any case it still works fine like that. It just doesn't work with
import Vuetify from 'vuetify/lib'

[KaelWD]

You need to provide a reproduction environment then, because it looks to me like babel isn't configured correctly.

[JeremyWalters]

@KaelWD Thanks I will do that

[JeremyWalters]

@KaelWD

Vue CLI v3.0.5
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, CSS Pre-processors, Linter, Unit
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files

vue add vuetify(Default Preset)

https://github.com/JeremyWalters/vue-jest-test-not-working Just run npm run test:unit

There is another trivial issue on this branch https://github.com/JeremyWalters/vue-jest-test-not-working/tree/types-error

Thank you in making time for this, I really appreciate all vuetifies work .

[KaelWD]

You have several problems in that repo:

• You should not be importing the vuetify plugin in a component, it is already done in main.ts
• Vuetify distributes types, add it it the types array in tsconfig instead of using // @ts-ignore
• vue-cli's default jest config ignores js if you've selected typescript, change the regex to [jt]sx and enable allowJs in tsconfig
• vuetify/lib doesn't contain any components, and vuetify-loader only works with webpack. Either import 'vuetify' in your test setup, or import plugins/vuetify and use moduleNameMapper and transformIgnorePatterns so the styles are ignored properly

See https://github.com/vuetifyjs/vue-cli-plugin-vuetify/issues/9 and https://github.com/vuetifyjs/vue-cli-plugin-vuetify/issues/43, we don't yet modify anything for unit tests or typescript.

https://github.com/JeremyWalters/vue-jest-test-not-working/pull/1

[JeremyWalters]

@KaelWD Thank you so much for all your effort, I really appreciate it a lot. Thanks so much for the changes you made.

Thanks for everything you do for the community.