Mocking dotenv with Jest - jestjs

Question

I have a test from a web application that was originally created using CRA. So It uses Jest and react-testing-library. I am also in a TypeScript environment.
The beginnings of the test I have:
import { render, screen } from "#testing-library/react";
import dotenv from 'dotenv';
import App from './App';
. . . .
jest.mock('dotenv');
//(what goes here?)
But here is where I need help. I am not sure how to mock the module. In the component I have something like:
if (process.env.REACT_APP_CONSTRUCTION === "true") {
return (<UnderConstruction />);
} else {
return (<App/ >);
}
In testing this component I would like to test the two scenarios, one where the environment returns "true" and the other otherwise.
Ideas or suggestions?

Answer 1

You can create mock env variables after each test in jest like below.
Also you don't need to mock jest.mock('dotenv'); so you can delete that part in your test file.
const OLD_ENV = process.env
afterEach(() => {
cleanup()
jest.clearAllMocks()
jest.resetModules()
process.env = { ...OLD_ENV }
delete process.env.NODE_ENV
})
it('scenario 1', () => {
// Given
process.env.REACT_APP_CONSTRUCTION = true // mock variable for scenario 1
// When
const { queryByText } = render(<App />)
const underConstructionText = queryByText('Under Construction')// Just an example
// Then
expect(underConstructionText).toBeInTheDocument()
})
it('scenario 2', () => {
// Given
process.env.REACT_APP_CONSTRUCTION = false // mock variable for scenario 2
...
// When
const { queryByText } = render(<App />)
const underConstructionText = queryByText('Under Construction')
// Then
expect(underConstructionText).not.toBeInTheDocument()
})