title: Vuetify Jest Unknown custom element <v-*>
body: <p>I am writing unit tests for my project, using Jest. Project is based on Vue, Vuetify (1.5) and TypeScript (and vue-property-decorator).</p>
  
  <p>I have basic wrapper for <code>&lt;v-btn&gt;</code>. It looks like this:</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-btn
      :round="!square"
      v-on="$listeners"
    &gt;
      &lt;slot /&gt;
    &lt;/v-btn&gt;
  &lt;/template&gt;
  
  &lt;script lang="ts"&gt;
  import { Vue, Prop, Component } from 'vue-property-decorator';
  
  import { VBtn } from 'vuetify/lib';
  
  @Component({
    components: {
      VBtn,
    },
  })
  export default class Btn extends Vue {
    @Prop({ default: false, type: Boolean }) private square!: boolean;
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>And I wrote basic test, just to mount this component:</p>
  
  <pre><code>import { mount } from '@vue/test-utils'
  import Vue from 'vue';
  import Btn from './Btn.vue';
  
  describe('Btn', () =&gt; {
  
    it('should render button', () =&gt; {
      const wrapper = mount(Btn, {
        propsData: {
          onClick: () =&gt; {}
        }
      });
  
      console.log((Vue as any).options.components.VBtn)
  
      console.log('=======================');
      console.log(wrapper.html());
      console.log('=======================');
    });
  });
  </code></pre>
  
  <p>When running test I'm getting this error:</p>
  
  <pre><code>  console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
      [Vue warn]: Unknown custom element: &lt;v-btn&gt; - did you register the component correctly? For recursive components, make sure to provide the "name" option.
  
      found in
  
      ---&gt; &lt;Btn&gt;
  </code></pre>
  
  <p>But I know that component is registered - it works when running the project (not test). Also, I have console log in test that checks if it is registered (<code>console.log((Vue as any).options.components.VBtn)</code>) and it shows that component is registered globally.</p>
  
  <p>Here is my <code>jest.config.js</code>:</p>
  
  <pre><code>module.exports = {
    moduleFileExtensions: [
      "js",
      "ts",
      "json",
      "vue"
    ],
    moduleNameMapper: {
      "^@/(.*)$": "&lt;rootDir&gt;/src/$1",
      "^vuetify/lib$": "vuetify",
    },
    modulePaths: [
      "&lt;rootDir&gt;/src",
      "&lt;rootDir&gt;/node_modules"
    ],
    transform: {
      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
      "^.+\\.ts?$": "ts-jest",
      ".*\\.(vue)$": "vue-jest",
    },
    transformIgnorePatterns: [
      "&lt;rootDir&gt;/node_modules/(?!(vuetify)/)",
    ],
    testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(js?|ts?)$",
    setupFilesAfterEnv: ['&lt;rootDir&gt;/tests/unit/setup.ts'],
  }
  </code></pre>
  
  <p>And <code>setup.ts</code> file:</p>
  
  <pre><code>import Vue from 'vue';
  import Vuetify from 'vuetify';
  
  Vue.config.productionTip = false;
  Vue.use(Vuetify);
  </code></pre>
  
  <p>I was trying to move code from <code>setup.ts</code> to the test but it doesn't changed anything. I think there may be problem with <code>'vue-property-decorator'</code> but my whole project is based on it so I don't want to change it.
  Can you help me? Maybe something is wrong in my Jest transform configuration?</p>