Vuetify: Cannot import and use vuetify components for unit testing with jest

[sametsafak]

Environment

Vuetify Version: 1.5.16
Vue Version: 2.6.10
Browsers: Chrome 76.0.3809.100
OS: Mac OS 10.15.0

Steps to reproduce

yarn install
yarn test:unit

to serve

vue serve src/dev.vue

Expected Behavior

Working smoothly with single file component structure from vue

Actual Behavior

Syntax Error

Reproduction Link

https://github.com/sametsafak/sfc-jest

Other comments

I am trying to create a single file component and write unit tests with jest. Project works with vue's instant prototyping method.

Normally project and tests are working smoothly but not with vuetify.

When I try to import vuetify components, jest gives me SyntaxError: Unexpected identifier error on importing vuetify components line (src/components/FcTable.vue:41:1). I checked my environment to make sure if it's an es6 import issue but it's not. I can import and use another script files.

[johnleider]

There is an ongoing issue with https://github.com/vuejs/vue-cli/issues/1584 . Not sure if something pops out at @KaelWD .

[KaelWD]

I have this in a project at work:

transform: { '^.*\\.js$': 'babel-jest' },
transformIgnorePatterns: ['node_modules/(?!vue-router|@babel|vuetify)']

May also need some babel config changes, idk.

[morficus]

Adding that transformIgnorePatterns property to my Jest config did the trick
Thank you, @KaelWD 🙏

[morphatic]

Update

🚨 DISREGARD: THIS DOESN'T WORK LIKE I THOUGHT 🚨

@KaelWD solution works for me. Here is another alternative that I found to be faster to run:

js// jest.config.js module.exports = { // ... other config ... moduleNameMapper: { // ... other mapped names ... 'vuetify/lib': '<rootDir>/node_modules/vuetify/es5', } }

The reason this works is because Vuetify ships with a pre-compiled ES5 version, so just mapping to that one prevents you from having to use Babel or any other sort of pre-processor.

[KaelWD]

@morphatic note that isn't 100% equivalent as vuetify/es5 doesn't export components, so anything other than the default import from vuetify/lib will fail.

[morphatic]

Yeah, sorry. I've been banging my head against Jest and TS all day. I was sure I understood it at the time... 😓

[KaelWD]

It will work in most cases if you aren't manually importing anything else, just something to be aware of if you start getting problems. babel-jest should be just as fast after the first run as it caches the compilation result.

[WaldemarEnns]

Adding that transformIgnorePatterns property to my Jest config did the trick

That worked for me too. Thank you @KaelWD ! 🎉

My jest.config.js:

module.exports = {
  preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
  setupFilesAfterEnv: ['<rootDir>tests/setup.ts'],
  transformIgnorePatterns: ['node_modules/(?!vue-router|@babel|vuetify)']
}