Jest 找不到模块 @env React Native

Question

我目前在 React Native 应用程序中使用https://github.com/goatandsheep/react-native-dotenv处理 .env 时遇到一些问题。

错误=>无法从“src/api/api.ts”中找到模块“@env”

我目前正在测试我的 redux saga 来调用 api 端点：

import axios from 'axios';
import {API_URL} from '@env';

export default axios.create({
  baseURL: API_URL,
  responseType: 'json',
});

API端点

export const sendCheckNumber = async (
  phoneNumber: string,
): Promise<AuthenticationTO> => {
  const response = await axios.get<AuthenticationTO>(
    `SendCheckNumber/${phoneNumber}`,
  );

  return response.data;
};

我正在使用 ts-jest package.json。我在文档中看到可以将 bable 包含在 ts-jest 中，因为我正在使用 bable 导入“module:react-native-dotenv”作为插件。我以为这已经解决了我的问题，但不幸的是它仍然失败。也许你们中的某个人有一些可能导致此错误的建议。

谢谢你！！！

包.json

"jest": {
    "preset": "react-native",
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js",
      "\\.(ts|tsx)$": "ts-jest"
    },
    "globals": {
      "ts-jest": {
        "babelConfig": "babel.config.js",
        "tsConfig": "tsconfig.jest.json"
      }
    },
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ],
    "modulePaths": [
      "<rootDir>/src"
    ],
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$"
  }

Answer 1

这里是山羊和绵羊的维护者。我最近添加了一些有关如何完成此操作的文档。查看有关 TypeScript 的文档部分。以下是摘录：

• types在您的项目中创建一个文件夹
• 在该文件夹中创建一个*.d.ts文件，例如env.d.ts
• 在该文件中，按以下格式声明一个模块：

declare module '@env' {
  export const API_BASE: string;
}

将所有 .env 变量添加到该模块中。

• 最后，将此文件夹添加到文件typeRoots中的字段中tsconfig.json：

declare module '@env' {
  export const API_BASE: string;
}

让我知道这是否有效！

Answer 2

我解决了这个问题，如下所示。

import {API_URL} from '@env';`

添加了这个：

import {API_URL} from 'react-native-dotenv';

并在babel.config.js中添加下一个

module.exports = function (api) {
  api.cache(true)
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "module:react-native-dotenv",
        {
          moduleName: "react-native-dotenv",
        },
      ],
    ],
  }
}

这对我来说很有效。