Jest cannot find module Vue/Vite - vue.js

Question

Jest Configuration:
/** #type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
preset: 'ts-jest',
moduleFileExtensions: ['js', 'json', 'jsx', 'ts', 'tsx', 'vue'],
moduleNameMapper: {
'^~/(.*)$': '<rootDir>/src/$1',
},
testEnvironment: 'jsdom',
testMatch: ['**/tests/unit/**/*.[jt]s?(x)'],
transform: {
'^.+\\.vue$': 'vue-jest',
'^.+\\.ts$': 'ts-jest',
},
}
My test file (.ts file) :
import { render } from '#testing-library/vue'
import Kaki from '~/components/Kaki.vue'
test('Kaki.vue', () => {
const { getByText } = render(Kaki)
getByText('Tono')
})
Here's my directory structure:
When I run the test, it says Cannot find module '~/components/Kaki.vue' or its corresponding type declarations.
I think it has something to do with moduleNameMapper

Answer 1

Can you check if it works if you change your Index.spec.ts to a .js file? The error you're getting is because TypeScript doesn't know what type should .vue files have.
In a new Vue CLI project, the error you're getting is prevented with the shims.d.ts which tells TS to treat *.vue files as if their default export had the Vue type.
The "correct" solution here is to figure out why isn't shims.d.ts telling TypeScript the type for *.vue files (which is why you're getting the "Cannot find module [...] or its corresponding type declarations" error
Another thing is - this is not a real solution but a temporary fix:
// #ts-ignore
import Kaki from '~/components/Kaki.vue'
Another thing you could try is importing Kaki with a relative path (so without the ~ alias)? The ~ alias may be broken in some way - are you sure the alias is correctly defined in your tsconfig.json?