Testing different environment variables

Question

We are running tests that test various settings for an environment variable. We need to be able to set the environment variable differently for different tests, and therefore cannot simply import an .env file with the variable on it. We have tried setting process.env.REACT_APP_FEATURE = "true" within the test itself, have tried setting it using 'beforeAll' and 'beforeEach' as well as using jest.resetModules(). None of these approaches have worked.

Global Navigation Tests

export function renderWithIntl(
    node,
    {
      initialState = {},
      store = getStore(initialState),
      locale = DEFAULT_LOCALE,
      messages = enMessages,
      ...renderOptions
    } = {}
  ) {
    const wrappingComponent = getWrappingComponent({
      initialState,
      store,
      locale,
      messages,
    });
  
    return render(node, { wrapper: wrappingComponent, ...renderOptions });
  }

const defaultProps = {
  setIsNavigationOpen: jest.fn(),
  isNavigationOpen: true,
};
const defaultState = {
  authorizedComponent: {
    permissions: [],
  },
};

describe("GlobalNavigation", () => {
  beforeAll(() => {
    process.env.REACT_APP_FEATURE = "true";
  });

  const setupTestRender = (initialState) => {
    renderWithIntl(<GlobalNavigation {...defaultProps} />, {
      initialState: {
        ...defaultState,
        ...initialState,
      },
    });
  };

  it("should render all the sections when user has all permissions", () => {
    setupTestRender();
    const sections = globalNavigationRoutes.mainRoutes;
    const renderedSections = screen.getAllByTestId("global-navigation-section");
    expect(renderedSections.length).toBe(sections.length);
  });
});

GlobalNavigation.js

const GlobalNavigation = ({ isNavigationOpen, setIsNavigationOpen }) => {
  const toggleNavigation = () => setIsNavigationOpen(!isNavigationOpen);
  const accessibleMainNavigationRoutes = globalNavigationRoutes.mainRoutes;

  return (
    <FocusLock
      group="global-navigation-drawer"
      disabled={!isNavigationOpen}
      returnFocus
    >
      <div>
        <div>
          <nav>
            {accessibleMainNavigationRoutes.map((route) => (
              <div data-testid="global-navigation-section" key={route.title}>
                <div>{route.title}</div>
                <div>
                  {route.links.map((link) => (
                    <Button
                      data-testid="global-navigation-section-link"
                      key={link.path}
                      onClick={toggleNavigation}
                      to={link.path}
                      isLink
                      buttonType={buttonTypes.link}
                    >
                      {link.title}
                    </Button>
                  ))}
                </div>
              </div>
            ))}
          </nav>
        </div>
      </div>
    </FocusLock>
  );
};

globalNavigationRoutes

import routes from "app/routes";

export const globalNavigationRoutes = {
  mainRoutes: [
    {
      title: "test1",
      links: [routes.test1],
    },
    {
      title: "test2",
      links: [routes.test2],
    },
    {
      title: "test3",
      links: [routes.test3],
    },
    {
      title: "test4",
      links: [routes.test4],
    },
    {
      title: "test5",
      links: [routes.test5, routes.test6],
    },
  ],
};

Routes.js

routes = {
  test1: {
    path: "/test1",
    getComponent: () => import("pages/test1"),
    title: "test1",
    exact: true,
  },
  test2: {
    path: "/test2",
    getComponent: () => import("pages/test2"),
    title: "test2",
    exact: true,
  },
  test3: {
    path: "/test3",
    getComponent: () => import("pages/test3"),
    title: "test3",
    exact: true,
  },
  test4: {
    path: "/test4",
    getComponent: () => import("pages/test4"),
    title: "test4",
    exact: true,
  },
  test5: {
    path: "/test5",
    getComponent: () => import("pages/test5"),
    disabled: process.env.REACT_APP_FEATURE !== "true",
    title: "test5",
    exact: true,
  },
  test6: {
    path: "/test6",
    getComponent: () => import("pages/test6"),
    disabled: process.env.REACT_APP_FEATURE !== "true",
    title: "test6",
    exact: true,
  },
};

So GlobalNavigation.js renders the nav, using globalNavigationRoutes to create the links which uses routes.js to get the relevant data. Routes.js should not display the link if process.env.REACT_APP_FEATURE=false

When we build this with the .env files for the various environments we build in, it works as intended. But when we run the tests it does not work and we need to be able to change the environment variables to test for different environments

We have tried using 'beforeAll' and 'beforeEach' as well as using jest.resetModules() to try and set the environment variable REACT_APP_FEATURE=true in the test but this did not work.