Load test environment variables in Jest

[eric-burel]

Is your feature request related to a problem? Please describe.

Step 1: load environment variables from .env.test (done already)

See new documentation: https://nextjs.org/docs/basic-features/environment-variables#test-environment-variables

We need to use @next/env to load .env.test (and .env.test.local etc. like Next does as a default) in Jest.

Step 2: load derived variables from next-config.env (to do)

The next config might set additional variables. So, after the .env is loaded, we also should set process.env with the same variable we create in next-config.js.This is in particular useful for environment variables that are dynamic (derived from other variables, from the package.json etc.).

Sample code:

This is a sample code, not working as is but shows the idea

// jest-global-setup.js
const { extendEnv } = require("../nextConfig/extendEnv"); // the code that compute .env need to be exposed outside of next-config.js, so we can reuse it here
// https://nextjs.org/docs/basic-features/environment-variables#test-environment-variables
const { loadEnvConfig } = require("@next/env");
module.exports = async () => {
  console.info(`Jest setupTests script will:
  console.log("Loading environment variables in Jest");
  // @see https://github.com/vercel/next.js/issues/17903#issuecomment-708902413
  await loadEnvConfig(process.env.PWD);
  console.log("process.env", process.env);
  // Compute next.config env => it defines the constructed variables, so we need
  // to run it in Jest for the config to work correctly
  const envVariables = extendEnv({}).env;
  Object.entries(envVariables).forEach(([varName, varValue]) => {
    console.log(
      "Setting up envrionement variable",
      varName,
      "to value",
      varValue
    );
    process.env[varName] = varValue;
  });
};

Expected result

You should be able to display an env variable in a Jest test:

• that comes from .env.test
• and another variable that comes from nextConfig env