Jest: Vue TypeScript: Cannot resolve Relative path Import of transpiled js with implicit .js path extension

Viewed 729

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'],
} ;

0 Answers
Related