Jest cannot find module @env React Native

Question

I'm currently facing some problem I'm using in my react native app https://github.com/goatandsheep/react-native-dotenv for handling .env.

Error => Cannot find module '@env' from 'src/api/api.ts'

I'm testing currently my redux saga to call the api endpoint:

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

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

API Endpoint

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

  return response.data;
};

I'm using ts-jest package.json. I saw in the docs its possible to include bable in ts-jest because I'm using bable to import the 'module:react-native-dotenv', as plugin. I thought that will already solve my problem but unfortunately it still fails. Maybe someone of you have some suggestion what could cause this error.

Thank you!!!

package.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

Maintainer goatandsheep here. I recently added some documentation on how this is done. Take a look at the documentation section on TypeScript. Here is the excerpt:

• Create a types folder in your project
• Inside that folder, create a *.d.tsfile, say, env.d.ts
• in that file, declare a module as the following format:

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

Add all of your .env variables inside this module.

• Finally, add this folder into the typeRoots field in your tsconfig.json file:

{
    "typeRoots": ["./src/types"],
}

Let me know if that works!