运行 Jest 时 NextJS 中未定义环境变量

Question

我设置了一个简单的 NextJS 项目，但在让 Jest 识别我的环境变量时遇到问题。我已尽我所能按照https://nextjs.org/docs/basic-features/environment-variables#test-environment-variables上的说明进行操作，但无法使其正常工作。

这是我的问题的简化版本。

// .env.test.local
MY_ENVIRONMENT_VARIABLE=my_value

// .env.test.local
MY_ENVIRONMENT_VARIABLE=my_value

// My function I want to test
export const getEnvironment = () => {
  const MY_ENVIRONMENT_VARIABLE = process.env.MY_ENVIRONMENT_VARIABLE;
  return MY_ENVIRONMENT_VARIABLE;
};

我在开玩笑jest --watch。我可以看到它得到了 environment test，但没有出现我自己指定的变量。

上面的测试失败了

Expected: "my_value"
Received: undefined

如果有任何其他文件相关，请发表评论，我会添加我所拥有的。

Answer 1

NextJS 12 与新编译器 SWC

NextJS 版本 12 引入了一个新的编译器 SWC，用 Rust 编写。使用此编译器管理环境变量非常简单并且是内置的。https://nextjs.org/docs/advanced-features/compiler#jest上的文档描述了如何设置 Jest 配置：

// jest.config.js
const nextJest = require('next/jest');

// Providing the path to your Next.js app which will enable loading next.config.js and .env files
const createJestConfig = nextJest({ dir: './' });

// Any custom config you want to pass to Jest
const customJestConfig = {
  moduleDirectories: ['node_modules', __dirname]
};

// createJestConfig is exported in this way to ensure that next/jest can load the Next.js configuration, which is async
module.exports = createJestConfig(customJestConfig);

在这里，我添加了一个自定义配置，moduleDirectories因为我在运行测试时遇到了绝对导入问题。由于我的代码驻留在.我想添加'.'为模块目录。但由于Jest 中存在一个未解决的错误，您必须指定__dirname。

NextJS 11 及更早版本

自从我问这个问题以来，文档已经更新，并提供了比在测试之前完全开始下一步更好的答案。

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

将环境变量加载到测试环境中的建议方法是添加 jest 的配置文件，添加设置脚本，并在该脚本中使用 NextJS 包含的loadEnvConfig函数。

可以.env.test填充虚拟数据并签入您的存储库。与普通环境变量一样，您可以使用.env.test.local-file 在本地覆盖它们。

// jest.config.js
module.exports = {
  globalSetup: '<rootDir>/__test__/setupEnv.js'
}

// __test__/setupEnv.js
import { loadEnvConfig } from '@next/env'

export default async () => {
  const projectDir = process.cwd()
  loadEnvConfig(projectDir)
}

# .env.test
MY_ENVIRONMENT_VARIABLE="a-variable-for-testing"

Answer 2

Next 需要在您的测试运行之前实例化才能访问这些环境变量。

    // include this in your Jest setup file, or before your tests
    import next from "next";
    next({});

目前有一个拉取请求将其添加到 Next 文档中：https : //github.com/vercel/next.js/pull/16443

确保还尊重客户端环境变量的命名约定，前缀NEXT_PUBLIC_是否将在面向客户端的代码中使用环境变量。