如何使用 Next.js 在测试中加载环境变量？

Question

我正在尝试使用 JavaScript 运行一个简单的测试，如下所示。

\n

import React from 'react';\nimport Customization from 'components/onboarding/customization';\nimport '@testing-library/jest-dom';\nimport { render, screen, fireEvent } from '@testing-library/react';\n\ndescribe('customization render', () => {\n  it('should render the Hero page with no issue', () => {\n    render(<Customization />);\n\n    const heading = screen.getByText(\n      /All the Moodmap at one place!/i\n    );\n\n    expect(heading).toBeInTheDocument();\n  });\n  it("should call onCLick method on click", () => {\n    const mockOnClick = jest.fn()\n\n    const {container} = render(<Customization />);\n\n    const button = getByTestId(container, 'alreadyDownloaded');\n    fireEvent.click(button);\n    expect(mockOnClick).toHaveBeenCalledTimes(1)\n\n\n    // const mockOnClick = jest.fn()\n    // const utils = render(<Customization onClick={mockOnClick} />)\n    // fireEvent.click(screen.getByText(/already downloaded \xe2\x9f\xb6/i))\n    // expect(mockOnClick).toHaveBeenCalledTimes(1)\n  })\n});\n

\n

运行测试时我收到此错误

\n

No google analytics trackingId defined\n\n   8 |   debug: process.env.NODE_ENV !== 'production',\n   9 |   plugins: [\n> 10 |     googleAnalyticsPlugin({\n     |     ^\n  11 |       trackingId: process.env.NEXT_PUBLIC_GA_TRACKING_ID,\n  12 |     }),\n

\n

我如何让这个错误消失 - 鉴于上述情况，它肯定不需要 Google Analytics 代码，运行测试时它不在生产中？

\n

更新

\n

所以我需要确保.env文件正在加载！

\n

在我的package.jsonJest 设置中：

\n

"jest": {\n    "testMatch": [\n      "**/?(*.)(spec|test).?(m)js?(x)"\n    ],\n    "moduleNameMapper": {\n      "\\\\.(css|less|scss)$": "identity-obj-proxy"\n    },\n    "moduleDirectories": [\n      "node_modules",\n      "src"\n    ],\n    "rootDir": "src",\n    "moduleFileExtensions": [\n      "js",\n      "jsx",\n      "mjs"\n    ],\n    "transform": {\n      "^.+\\\\.m?jsx?$": "babel-jest"\n    },\n    "coverageThreshold": {\n      "global": {\n        "branches": 80,\n        "functions": 80,\n        "lines": 80,\n        "statements": -10\n      }\n    }\n  },\n

\n

更新代码以使用 jest.setup - 无法加载 env

\n

所以

\n

import { configure } from 'enzyme';\nimport Adapter from 'enzyme-adapter-react-16';\nimport "@testing-library/jest-dom";\n\nconfigure({\n    adapter: new Adapter()\n});\n\nmodule.exports = {\n  testMatch: [\n    "**/?(*.)(spec|test).?(m)js?(x)"\n  ],\n  moduleNameMapper: {\n    "\\\\.(css|less|scss)$": "identity-obj-proxy"\n    },\n  moduleDirectories: [\n    "node_modules",\n    "src"\n    ],\n    rootDir: "src",\n  moduleFileExtensions: [\n    "js",\n    "jsx",\n    "mjs"\n  ],\n  transform: {\n    "^.+\\\\.m?jsx?$": "babel-jest"\n    },\ncoverageThreshold: {\n    "global": {\n        "branches": 80,\n        "functions": 80,\n        "lines": 80,\n        "statements": -10\n    }\n    },\n    setupFiles: ["../<rootDir>/.config.env.test"]\n\n};\n

\n

环境变量文件在这里：

\n

process.env.NEXT_PUBLIC_GA_TRACKING_ID=xxx\n

\n

这是未正确加载环境变量的代码。

\n

import Analytics from 'analytics';\nimport googleAnalyticsPlugin from '@analytics/google-analytics';\nimport Router from 'next/router';\n\n    // Initialize analytics and plugins\n    // Documentation: https://getanalytics.io\n    const analytics = Analytics({\n      debug: process.env.NODE_ENV !== 'production',\n      plugins: [\n        googleAnalyticsPlugin({\n          trackingId: process.env.NEXT_PUBLIC_GA_TRACKING_ID,\n        }),\n      ],\n    });\n

\n

Answer 1

您可以在测试中利用loadEnvConfigfrom@next/env来确保环境变量的加载方式与 Next.js 的加载方式相同。

首先设置.env.test要在测试中使用的 a。

NEXT_PUBLIC_GA_TRACKING_ID=ga-test-id

接下来，创建一个 Jest 全局设置文件（如果您还没有），并在您的jest.config.js.

NEXT_PUBLIC_GA_TRACKING_ID=ga-test-id

然后将以下代码添加到 Jest 全局设置文件中。

// jest.config.js

module.exports = {
    //...
    setupFilesAfterEnv: ['./jest.setup.js'],
};

Answer 2

此消息意味着trackingId未定义。正如您所看到的，它是从process.env. 您需要在项目的根目录中创建此文件并调用它.env。请注意，点位于文件名的开头。文件的内容应如下所示：

NEXT_PUBLIC_GA_TRACKING_ID=insert-key-here

如果 jest 没有读取您的 env 文件，您可以执行以下操作：

NEXT_PUBLIC_GA_TRACKING_ID=insert-key-here

您还可以查看这篇文章以了解更多详细信息。