Cannot find module '../BlogPost.vue' or its corresponding type declarations.

[Mnigos]

I have some problem with importing component I have test file in the same folder as component.

BlogPost.spec.ts

import 'jest';
import { shallowMount } from '@vue/test-utils';
import BlogPost from './BlogPost.vue';

describe('BlogPost Component', () => {
  it('Displaying posts from data', () => {
    const title = 'New Title';
    const wrapper = shallowMount(BlogPost, {
      propsData: { title },
    });
    expect(wrapper.text()).toMatch(title);
  });
});

BlogPost.vue

<template>
  <div class="d-flex flex-column align-center">
    <div class="rounded-xl blog-post">
      <v-row>
        <v-col>
          <div class="d-flex justify-center">
            <h1>{{ title }}</h1>
          </div>
          <div class="d-flex justify-center">
            <v-img :src="image" />
          </div>
          <div class="d-flex justify-center">
            {{ description }}
          </div>
        </v-col>
      </v-row>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  name: 'BlogPost',
  props: {
    title: String,
    image: String,
    description: String,
    date: Date,
  },
});
</script>

[cmauf]

What seems to be the problem? Some error output would be helpful.

[chris-verclytte]

Having the same here.

The error is something like (changed the names to match above example) :

src/components/BlogPost.spec.ts:4:28 - error TS2307: Cannot find module './BlogPost.vue' or its corresponding type declarations.

It also states the same for '@'-prefixed paths (despite the moduleNameMapper being configured).