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

【问题标题】：esModuleInterop flag set, still getting default import erroresModuleInterop 标志设置，仍然出现默认导入错误
【发布时间】：2020-09-15 14:38:07
【问题描述】：

我有一个使用 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"
    ]
}

jest.config.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 测试文件中的错误消息

主组件文件没有错误

【问题讨论】：

如果您的测试被tsconfig.json 排除在外，但似乎并非如此，就会发生这种情况。这可能是你的IDE误解了一些东西。从命令行运行./node_modules/.bin/tsc --noEmit 进行类型检查。
实际上，我们的测试不在src 文件夹中，因此您的建议被证明是100% 正确的。您介意将其发布为答案，以便我可以将其标记为解决方案吗？我知道这将是一些平凡的细节（我不总是这样吗？）。谢谢！
很高兴我能帮上忙。

标签： reactjs typescript jestjs

【解决方案1】：

TypeScript 会根据哪些文件被视为项目的一部分 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

【讨论】：