如何设置由 Cypress 运行的浏览器中可用的 process.env 变量

Question

在我的应用程序（基于 create-react-app 的 React）的源代码中，我使用了这样的 env 变量：process.env.REACT_APP_API_URL它们存储在我的.env.*文件中。

但是当我在 Cypress 下运行相同的应用程序时，process.env对象是空的。当 React 应用程序在 Cypress 下运行时，如何提供这些变量以在 React 应用程序中使用？

我知道我可以设置 Cypress env 变量，但这不是我想要的 - 这是一个不同的范围。

Answer 1

在 Cypress 10.3.0 及更高版本中更新

在 Cypress 中，环境变量（可通过 访问Cypress.env）与操作系统级环境变量不共享相同的范围。为了使process.env变量在 中可用Cypress，您应该使用第三方库，例如非常流行的dotenv包。

npm install dotenv

确保这行代码位于您的顶部cypress.config.js

require('dotenv').config()

现在您可以使用 process.env，但只能在该cypress.config.js文件下使用。正如另一个答案中提到的，您应该通过将所有属性传递给 Cypress 环境变量来利用Cypress.env()process.env命令，以便您可以在 Cypress 中全局访问这些变量

// cypress.config.js
module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      config.env = {
        ...process.env,
        ...config.env
      }
      return config 
    }
  }
})

请注意，在 Cypress 版本10.0.0及更高版本中，添加了setupNodeEvents以替换已弃用的插件文件。

现在您可以通过以下方式检索这些变量：

Cypress.env("your_proccess_env_property")

Answer 2

您可以使用配置 API并在您的插件文件上执行类似操作。设置config.env = process.env这将为Cypress.

// cypress/plugins/index.js
module.exports = (on, config) => {

  // modify env value
  config.env = process.env

  // return config
  return config
}

您还可以使用 有选择地分配所需的值config.env.YOUR_VAR = process.env.YOUR_VAR。