Блог

Главная - Вопросы по программированию - Установлен флаг esModuleInterop, по-прежнему выдается ошибка импорта по умолчанию

Установлен флаг esModuleInterop, по-прежнему выдается ошибка импорта по умолчанию

#reactjs #typescript #jestjs

#reactjs #typescript #jestjs

Вопрос:

У меня есть проект React с использованием TypeScript, и в основном файле 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

Сообщение об ошибке в тестовом файле Jest

Нет ошибки в файле основного компонента

Нет ошибки в файле основного компонента

Комментарии:

1. Это произойдет, если ваш тест исключен tsconfig.json , но, похоже, это не так. Вероятно, ваша среда РАЗРАБОТКИ что-то недопонимает. Запустите ./node_modules/.bin/tsc --noEmit из командной строки, чтобы выполнить проверку типа.

2. На самом деле, наших тестов нет в src папке, поэтому ваше предложение оказалось на 100% правильным. Не могли бы вы опубликовать его в качестве ответа, чтобы я мог пометить его как решение? Я знал, что это будет какая-то обыденная деталь (разве я не всегда?). Спасибо!

3. Рад, что смог помочь.

Ответ №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