开玩笑：Vue TypeScript：无法解析带有隐式.js路径扩展名的已转换js的相对路径导入

问题描述

我在带有TypeScript的Vue.js SPA中使用Jest。

我收到此错误：

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)

当我运行这个虚拟的健全性测试时（只是评估我是否可以导入此组件）：

import InteractionController from '@components/control/interaction/interaction-controller.vue' ;

describe
(
    'InteractionController',() =>
    {
        test
        (
            'sanity test',() =>
            {
// some test

            }
        ) ;

    }
) ;

导入的.vue文件确实很基本

<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>

，并且导入的.ts文件确实包含相对导入

import { EventSource } from '@/classes/event-source' ;
// No problem with the previous import
import { Cell } from './cell' ; // pb here
// rest of the file not copied

如果我将'./cell'替换为'cell'，也会遇到相同的问题，但是添加绝对路径可以解决此问题（Jest的moduleNameMapper起作用）。为什么我不能使用CommonJS解决相对路径？

已转译的js是：const cell_1 = require("./cell");和cell.js在同一文件夹中。

最好的配置文件，以防万一：

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）