react-native-dotenv: How to use with jest? ReferenceError: ENV_VARIABLE is not defined.

I’m running a react-native project with the typical usage, and getting an error while testing:

ReferenceError: ENV_VARIABLE is not defined.

babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['module:react-native-dotenv'],
}

I use it like this: (for simplicity)

function.js

import { SECRET_URL } from '@env'

export default = () => {
  return `${SECRET_URL}`
}

I add a test to my function: function.test.js and does something like this

describe('testing my function', () => {
  it('should return correct url', () => {
   const foo = myFunction()
   expect(foo).toBe('whatever url I was expecting')
  }
 )
)

Do I need to mock things with jest or what’s the workflow?

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 8
  • Comments: 24 (8 by maintainers)

Most upvoted comments

@sarulathadurai were you able to fix the issue?

To fix this don’t import env variables as

import {ENV_VARIABLE} from @env

Instead use

const env = process.env

and use env.ENV_VARIABLE wherever required. This way both tests and coverage are running properly

+1 I’m in the same situation. Is there a way to use this lib with Jest?

For me the env variables are accessible while running test but while getting coverage the env variables are not loading creating ReferenceError: ENV_VARIABLE is not defined.

@goatandsheep Is there a way to programatically set the environment variables for dotenv in jest?

I’m trying to do something like:

jest.mock('react-native-dotenv', () => ({ VARIABLE1: 'value', VARIABLE2: 'value2', }));

Different tests might have different values for the same environment variables. If I have only a single source I can’t have this flexibility.

But that process could be better. For example, through the variable that can set the file, because it’s cool to determine it of a different way. It could open options, for example, to define a .env.test when the script of test to be executed, without the necessity of update always the path in babel configuration file.

You can do a lot on the babel config file take a look at https://babeljs.io/docs/en/configuration#javascript-configuration-files, why bake more functionality into the plugin when switching envs can be easily setup there. Another idea is when running your test script you can setup env variables for that run only via command line

That’s it @marcorivm.

I solved the problem using this solution, with Babel.

But that process could be better. For example, through the variable that can set the file, because it’s cool to determine it of a different way. It could open options, for example, to define a .env.test when the script of test to be executed, without the necessity of update always the path in babel configuration file.

You can do a lot on the babel config file take a look at https://babeljs.io/docs/en/configuration#javascript-configuration-files, why bake more functionality into the plugin when switching envs can be easily setup there. Another idea is when running your test script you can setup env variables for that run only via command line

But that process could be better. For example, through the variable that can set the file, because it’s cool to determine it of a different way. It could open options, for example, to define a .env.test when the script of test to be executed, without the necessity of update always the path in babel configuration file.

@sarulathadurai @andvalsol It is also possible to get rid of those errors by the changing the coverage provider --coverageProvider=v8. Unfortunately this may lead to bigger memory consumption and might require higher resources on your CI.

Only this worked out for me: you could just simply add this variable to your jest.config.js.

module.exports = {
  ...
  globals: {
    ...
    ENV_VARIABLE: 'env_variable',
    ...
  },
  ...
};

@goatandsheep I tried this but that did not work for me.

I actually made a work around for this on my end so if @goatandsheep want’s to close that’s all good on my side, I’m still using the package so I will probably circle back if I run into issues 🤓

It seems nice!

I solve my problem as you said before, I was using an old version of library. I have done the update and the set up and now all works well. Thanks!

good point! you can do that in your .babelrc:

{
    "env": {
        "test": {
            "plugins": [["module:react-native-dotenv", { "path": "/path/to/file" }]],
        }
    }
}

@goatandsheep I think it can help. But another way to do it would be a way to specify the file, like a way to provide the name of file that be executed that time.

I’ve now added a way to use .env.test as environment variables. Does that help?