esModuleInterop 标志已设置，仍然出现默认导入错误

Question

我有一个使用 TypeScript 的 React 项目，在主 tsx 文件中，该import React from 'react'行工作正常。但是在我的测试文件中，它仍然触发 TS1259 错误。我猜我的 TS/Jest/Babel 配置有些奇怪，但似乎无法确定。

有人知道问题是什么吗？

tsconfig.json

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "target": "ES2019",
        "moduleResolution": "node",
        "module": "ESNext",
        "allowJs": true,
        "noEmit": true,
        "strict": true,
        "isolatedModules": true,
        "esModuleInterop": true,
        "strictNullChecks": true,
        "jsx": "react",
        "baseUrl": "./",
        "types": []
    },
    "include": [
        "index.d.ts",
        "src/*.ts",
        "src/*.tsx",
        "src/**/*.ts",
        "src/**/*.tsx"
    ]
}

笑话配置.js

module.exports = {
    collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/index.ts'],
    moduleNameMapper: {'^.+\\.s?css$': 'identity-obj-proxy'},
    transform: {'^.+\\.tsx?$': 'babel-jest'},
    testRegex: '/__tests__/.*\\.test\\.tsx?$',
    testURL: 'http://localhost',
    setupFilesAfterEnv: ['<rootDir>/__tests__/setup.ts'],
    setupFiles: [],
    testPathIgnorePatterns: [
        '__snapshots__',
        '__mocks__',
        '<rootDir>/scripts',
    ],
};

Jest 测试文件中的错误消息

主组件文件没有错误

Answer 1

TypeScript 根据 .NET 文件中指定的各种选项确定哪些文件被视为项目的一部分tsconfig.json。

如果您使用"include"和/或"files"属性显式指示这些文件，则只有那些与其中指定的路径和模式匹配的文件以及它们直接或间接引用的文件才是项目的一部分。

因此，在 下指定的任何设置"compilerOptions"（例如）"esModuleInterop"仅适用于这些文件，因为只有这些文件是项目的一部分。

正如你所指定的

"include": [
  "index.d.ts",
  "src/*.ts",
  "src/*.tsx",
  "src/**/*.ts",
  "src/**/*.tsx"
]

如果您的测试不在该src目录下，它们将不会被视为您项目的一部分，并且您的编译器选项将不会应用于它们。

您可以通过运行以下命令在命令行上验证项目中包含哪些文件

$ tsc --listFilesOnly

如果您有多个tsconfig文件（尤其是在较新的项目中经常出现这种情况），您也可以使用以下选项指定--project项目

例如

$ tsc --listFilesOnly --project ./tsconfig.app.json

请参阅官方文档了解更多详细信息。