question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug Report][2.5.5] Vuetify and Jest are not working with TSX

See original GitHub issue

Environment

Vuetify Version: 2.5.5 Vue Version: 2.6.12 Browsers: Chrome 91.0.4472.114 OS: Windows 10

Steps to reproduce

  1. yarn (install deps)
  2. yarn test (tests should fail)

Uncomment transformIgnorePatterns: ["node_modules/(?!(vuetify)/)"], line in jest.config.js to make tests pass.

Expected Behavior

Tests are passing without transformIgnorePatterns: ["node_modules/(?!(vuetify)/)"],

Actual Behavior

Tests are failing without transformIgnorePatterns: ["node_modules/(?!(vuetify)/)"],

Reproduction Link

https://github.com/Maxim-Mazurok/vue-jest-tsx-error-repro/tree/vuetify

Other comments

See also: https://github.com/wonderful-panda/vue-tsx-support/issues/78 which was fixed.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:20 (18 by maintainers)

github_iconTop GitHub Comments

2reactions
KaelWDcommented, Jun 25, 2021

Oops

- '^vuetify/lib': 'vuetify/es5/entry-lib',
+ '^vuetify/lib$': 'vuetify/es5/entry-lib',
2reactions
KaelWDcommented, Jun 25, 2021

Ok that’s my bad looks like /es5 uses the same entry as the UMD build which doesn’t re-export components. It takes two maps to fix this:

  moduleNameMapper: {
    '^vuetify/lib': 'vuetify/es5/entry-lib',
    '^vuetify/lib/(.*)': 'vuetify/es5/$1',
  }
Read more comments on GitHub >

github_iconTop Results From Across the Web

Vue.js Vuetify , Issue running my first unit test with Jest
Solved by not using a localVue: import Vue from "vue"; import { mount } from "@vue/test-utils"; import router from "@/router"; ...
Read more >
Frequently asked questions — Vuetify
My application is not working. First, ensure that you're using the latest version of Vue.js and Vuetify. Try to reproduce it in codepen...
Read more >
Testing JSX components with Jest in NuxtJS - Damir's Corner
Thanks to the detailed error message, fixing this problem wasn't difficult. ... I had to add the .tsx file extension to jest.config.js :...
Read more >
Browse Javascript Technical Problem Clusters - Code Grepper
Get code examples instantly right from your google search results with the Grepper Chrome Extension.
Read more >
Vue.js and Vuetify unit testing with Jest - IOBIO
You can overcome this problem by not using the localVue . The test would then look like: import { createLocalVue, mount, shallowMount } ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found