TypeScript+Jest运行报错Cannot use import statement outside a module如何解决

解决方案 #

步骤1：修复babel.config.js配置错误 #

当前presets数组格式错误，@babel/preset-typescript被错误嵌套进了@babel/preset-env的配置参数中，修改为如下内容：

module.exports = api => {
    const isTest = api.env('test');
    api.cache(true); // 增加缓存提升编译速度
    return {
        presets: [
            [
                '@babel/preset-env',
                {
                    targets: {
                        node: 'current',
                    },
                },
            ],
            '@babel/preset-typescript',
            '@babel/preset-react' // 新增react预设，兼容jsx代码
        ],
        env: {
            test: {
                plugins: [
                    "transform-es2015-modules-commonjs"
                ]
            }
        }
    };
};

步骤2：更新jest.config.js配置 #

补充转译文件匹配规则，开启ts-jest的babel支持，添加ES模块包的转译规则：

module.exports = {
    preset: 'ts-jest',
    rootDir: "./",
    testEnvironment: "jsdom", // 测试react代码需要用jsdom环境，原node环境不兼容dom相关API
    globals: {
        'ts-jest': {
            tsconfig: {
                jsx: 'react',
                isolatedModules: true
            },
            babelConfig: true // 开启babel配置读取
        },
    },
    testPathIgnorePatterns: ['/dist', '<rootDir>/src/assets'],
    transform: {
        '^.+\\.(ts|tsx|js|jsx)$': 'ts-jest', // 匹配所有ts/tsx/js/jsx文件转译
    },
    transformIgnorePatterns: [
        // 排除需要转译的第三方ES模块包，可根据实际报错的包补充
        'node_modules/(?!(react-select|react-spinners)/)'
    ],
    moduleNameMapper: {
        "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/__mocks__/fileMock.js",
        "\\.(css|less)$": "<rootDir>/src/__mocks__/fileMock.js",
        "^@common(.*)$": "<rootDir>/src/common$1",
        "^@components(.*)$": "<rootDir>/src/components$1", // 匹配tsconfig里的别名
        "^@webparts(.*)$": "<rootDir>/src/WebParts$1",
    },
    collectCoverage: true,
    verbose: true,
};

步骤3：修复package.json依赖问题 #

当前安装的babel-core是过时的beta版本，替换为正式版的@babel/core，执行如下命令：

npm uninstall babel-core
npm install @babel/core --save-dev

步骤4：可选优化tsconfig配置 #

可保留现有配置，若仍有问题可将compilerOptions.module临时改为ESNext，ts-jest会自动处理转译为commonjs。

修改完成后清除jest缓存再执行测试：

npx jest --clearCache
npm run test

内容的提问来源于stack exchange，提问作者Ozan Mudul