在 React Expo 中无法从 \'src/store.ts\' 中找到模块 \'@env\'

Question

我正在尝试使用打字稿创建一个 expo react 应用程序。该应用程序运行良好，但是当我尝试使用 Jest 编写一些测试时，它总是说它无法从我的商店文件中找到模块“@env”。

 Cannot find module '@env' from 'src/store.ts'

    Require stack:
      src/store.ts
      src/screens/HomeScreen.tsx
      src/tests/HomeScreen.test.tsx

    > 1 | import { REACT_APP_API_URL } from '@env';
        | ^
      2 | import axios from 'axios';
      3 | import { Alert } from 'react-native';
      4 | import create from 'zustand';

      at Resolver._throwModNotFoundError (node_modules/jest-resolve/build/resolver.js:425:11)
      at Object.<anonymous> (src/store.ts:1:1)
      at Object.<anonymous> (src/screens/HomeScreen.tsx:5:1)
      at Object.<anonymous> (src/tests/HomeScreen.test.tsx:3:1)

主屏幕.test.txt

import React from 'react';
import renderer from 'react-test-renderer';
import Home from '../screens/HomeScreen';

describe('<App />', () => {
  it('has 1 child', () => {
    const tree = renderer.create(<Home />).toJSON();
    console.log('test', tree);
  });
});

@env 在 src/types 和文件 env.d.ts 中定义

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

jest.config.js

// jest.config.js
// Sync object
module.exports = {
  preset: 'jest-expo',
  transform: {
    '^.+\\.tsx?$': [
      'ts-jest',
      {
        tsconfig: {
          jsx: 'react',
        },
      },
    ],
  },
  testMatch: ['**/?(*.)+(spec|test).ts?(x)'],
  collectCoverageFrom: [
    '**/*.{ts,tsx}',
    '!**/coverage/**',
    '!**/node_modules/**',
    '!**/babel.config.js',
    '!**/jest.setup.js',
  ],
  moduleFileExtensions: ['js', 'ts', 'tsx'],
  transformIgnorePatterns: [
    'node_modules/(?!(jest-)?react-native|@react-native|react=native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|sentry-expo)',
  ],
  coverageReporters: ['json-summary', 'text', 'lcov'],
  rootDir: './',
  modulePaths: ['<rootDir>'],
  collectCoverage: false,
  moduleNameMapper: {
    '#(.*)': '<rootDir>/node_modules/$1',
  },
};

tsconfig.json文件

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "jsx": "react-jsx",
    "strict": true,
    "typeRoots": ["./src/types"],
    "types": ["jest", "node","@types/jest"],
    "baseUrl": ".", // this must be specified if "paths" is specified.
    "paths": {
      "@env": ["node_modules/@env"] // this mapping is relative to "baseUrl"
    },
    
  },
}

babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      'react-native-reanimated/plugin',
      [
        'module:react-native-dotenv',
        {
          moduleName: '@env',
          path: '.env',
          blacklist: null,
          whitelist: null,
          safe: false,
          allowUndefined: true,
        },
      ],
    ],
  };
};

我几乎尝试了一切，例如Jest cannot find module @env React Native 从这里开始，还清除缓存并重新安装所有但没有任何效果。 有人可以帮我弄这个吗？

Answer 1

1. 在源文件夹中创建一个类型文件夹。

2. 在类型文件夹中创建一个名为 env.d.ts 的文件。

3. 将您的环境变量定义为字符串。

   declare module '@env' {
   
     export const REACT_APP_API_URL: string;
   
     // other ones
   }
   

Answer 2

首先在src 文件夹下创建新文件夹并将其命名为types，然后在types 下创建名为.env.d.js 的文件。最后你添加你的环境变量

declare module '@env' {
  export const REACT_APP_API_URL;
}