Блог

Главная - Вопросы по программированию - Тестирование приложения React с помощью Jest, используя Vite в качестве связывателя модулей; ошибка import.meta

Тестирование приложения React с помощью Jest, используя Vite в качестве связывателя модулей; ошибка import.meta

#reactjs #testing #jestjs #vite #esbuild

Вопрос:

я тестирую приложение React-Typescript с помощью Jest; мое приложение использует Vite в качестве пакета модулей. Проблема в том, что каждый раз, когда я запускаю тесты и jest сталкивается с инструкцией import.meta.ENV_VAR_NAME, я получаю следующую ошибку: «Синтаксическая ошибка: Невозможно использовать» import.meta «вне модуля»

Это мое jest.config.js файл:

 module.exports = {
roots: ["<rootDir>/src"],
setupFilesAfterEnv: ["<rootDir>/jest/jest.setup.js"],
collectCoverageFrom: ["src//*.{js,jsx,ts,tsx}", "!src//.d.ts"],
testMatch: [
    "<rootDir>/src//tests//.{js,jsx,ts,tsx}",
    "<rootDir>/src/*/.{spec,test}.{js,jsx,ts,tsx}"
],
testEnvironment: "jsdom",
transform: {
    // "^. .(js|jsx|mjs|cjs|ts|tsx)$": "esbuild-jest",
    "^. .(js|jsx|mjs|cjs|ts|tsx)$": "@swc/jest",
    "^. .scss$": "jest-scss-transform",
    "^. .css$": "<rootDir>/jest/mocks/cssMock.js"
},
transformIgnorePatterns: [
    "[/\]node_modules[/\]. .(js|jsx|mjs|cjs|ts|tsx)$",
    "^. .module.(css|sass|scss)$"
],
watchPlugins: [
    "jest-watch-typeahead/filename",
    "jest-watch-typeahead/testname"
],
resetMocks: true,
moduleDirectories: ["node_modules", "src"],
moduleNameMapper: {
    ".worker": "<rootDir>/src/seo/mocks/workerMock.ts",
    ".(css|sass|scss)$": "identity-obj-proxy"
}
};

В ключе преобразования jest.config я попытался использовать @swc/jest и esbuild-jest, но ни один не исправил проблему import.meta; есть ли решение этой проблемы? Могу ли я достичь этого без использования Babel?

Заранее спасибо за ваше время

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

1. Вы решили эту проблему? У меня тоже точно такая же проблема. Поэтому я обертываю код с помощью try~catch. подобный этому. « попробуйте { вернуть import.meta.env.VITE_GO_SERVER_URL; } поймать { вернуть ‘ локальный хост:8080 ‘; } «

2. @Ju-riJung да, я решил эту проблему; я изменил весь свой import.meta в process.env, чтобы не беспокоить шутку; что касается vite, с помощью плагина vite, называемого env-совместимым, во время компиляции преобразует process.env в import.meta, чтобы vite не беспокоили.

Метки: ,