I use Jest in a Vue.js SPA with TypeScript.
I got this error:
Cannot find module './cell' from 'interaction-controller.vue'
at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:259:17)
at src/components/control/interaction/interaction-controller.vue:70:1
at Object.<anonymous> (src/components/control/interaction/interaction-controller.vue:533:3)
when I run this dummy sanity test (just assessing whether I can import this component):
import InteractionController from '@components/control/interaction/interaction-controller.vue' ;
describe
(
'InteractionController',
() =>
{
test
(
'sanity test',
() =>
{
// some test
}
) ;
}
) ;
The .vue file imported is really basic
<template lang="html" src="./interaction-controller/interaction-controller.html"></template>
<style lang="scss" src="./interaction-controller/interaction-controller.scss" scoped></style>
<script lang="ts" src="./interaction-controller/interaction-controller.ts"></script>
and the imported .ts file does include the relative import
import { EventSource } from '@/classes/event-source' ;
// No problem with the previous import
import { Cell } from './cell' ; // pb here
// rest of the file not copied
I have got the same issue if I replace './cell' by 'cell', but adding an absolute path fixes the issue (moduleNameMapper of Jest works). Why can't I resolve relative path with CommonJS ?
Ths transpiled js is: const cell_1 = require("./cell");with cell.js in the same folder.
Jest config file, in case it helps:
module.exports =
{
rootDir: '.',
preset: 'ts-jest',
testEnvironment: 'jest-environment-jsdom',
globals:
{
'ts-jest':
{
tsConfig: 'tsconfig.spec.json'
},
'vue-jest':
{
tsConfig: 'tsconfig.spec.json'
}
},
moduleFileExtensions: ['ts', 'json', 'vue', 'js'],
moduleDirectories: ['node_modules', 'src'],
moduleNameMapper:
{
// transpile webpack path import such as '@/...' or '~/..' into plain paths
'^~/(.*)$': '<rootDir>/src/$1',
'^@/(.*)$': '<rootDir>/src/$1',
'^@classes/(.*)$': '<rootDir>/src/classes/$1',
'^@components/(.*)$': '<rootDir>/src/components/$1',
// mocks for media files and style files
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
'<rootDir>/src/test/__mocks__/file-mock.ts',
'\\.(css|scss)$': '<rootDir>/src/test/__mocks__/style-mock.ts'
},
setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
transform:
{
'^.+\\.ts$': 'ts-jest',
'.*\\.(vue)$': 'vue-jest',
'^.+\\.js?$':
[
'babel-jest',
{
'presets':
[
[
'@babel/preset-env',
{
'targets':
{
'node': 'current'
}
}
]
]
}
]
},
transformIgnorePatterns:
[
'/node_modules/(?!(ol|testing-library__jest-dom)/).*/'
],
testPathIgnorePatterns: ['end-to-end', 'ts_out'],
} ;