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

Posted 2023-02-22

【中文标题】如何使用 Next.js 在测试中加载环境变量？

【英文标题】：How to load environment variable in tests with Next.js?

【发布时间】：2021-09-10 00:05:15

【问题描述】：

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

import React from 'react';
import Customization from 'components/onboarding/customization';
import '@testing-library/jest-dom';
import  render, screen, fireEvent  from '@testing-library/react';

describe('customization render', () => 
  it('should render the Hero page with no issue', () => 
    render(<Customization />);

    const heading = screen.getByText(
      /All the Moodmap at one place!/i
    );

    expect(heading).toBeInTheDocument();
  );
  it("should call onCLick method on click", () => 
    const mockOnClick = jest.fn()

    const container = render(<Customization />);

    const button = getByTestId(container, 'alreadyDownloaded');
    fireEvent.click(button);
    expect(mockOnClick).toHaveBeenCalledTimes(1)


    // const mockOnClick = jest.fn()
    // const utils = render(<Customization onClick=mockOnClick />)
    // fireEvent.click(screen.getByText(/already downloaded ⟶/i))
    // expect(mockOnClick).toHaveBeenCalledTimes(1)
  )
);

运行测试时出现此错误

No google analytics trackingId defined

   8 |   debug: process.env.NODE_ENV !== 'production',
   9 |   plugins: [
> 10 |     googleAnalyticsPlugin(
     |     ^
  11 |       trackingId: process.env.NEXT_PUBLIC_GA_TRACKING_ID,
  12 |     ),

我如何使这个错误消失 - 当然它不应该需要上面给出的 Google Analytics 代码，运行测试时它不在生产环境中？

更新

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

在我的 package.json 我有这个 Jest 设置：

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

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

所以

import  configure  from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import "@testing-library/jest-dom";

configure(
    adapter: new Adapter()
);

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

;

环境变量文件在这里：

process.env.NEXT_PUBLIC_GA_TRACKING_ID=xxx

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

import Analytics from 'analytics';
import googleAnalyticsPlugin from '@analytics/google-analytics';
import Router from 'next/router';

    // Initialize analytics and plugins
    // Documentation: https://getanalytics.io
    const analytics = Analytics(
      debug: process.env.NODE_ENV !== 'production',
      plugins: [
        googleAnalyticsPlugin(
          trackingId: process.env.NEXT_PUBLIC_GA_TRACKING_ID,
        ),
      ],
    );

【问题讨论】：

你确定环境定义了NEXT_PUBLIC_GA_TRACKING_ID？

天哪，谢谢。如何将我的 .env 文件添加到 jest 以用于测试？

查看我添加的答案

这对nextjs.org/docs/basic-features/…有帮助吗？

【参考方案1】：

在测试期间，您可以leverage loadEnvConfig from @next/env 确保您的环境变量以与 Next.js 相同的方式加载。

首先设置一个.env.test 在测试期间使用。

NEXT_PUBLIC_GA_TRACKING_ID=ga-test-id

接下来，如果您还没有 Jest 全局设置文件，请创建一个，并在您的 jest.config.js 中引用它。

// jest.config.js

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

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

// jest.setup.js
import  loadEnvConfig  from '@next/env'

loadEnvConfig(process.cwd())

【参考方案2】：

此消息表示trackingId 未定义。如您所见，它来自process.env。您需要在项目的根目录中创建此文件并将其命名为.env。请注意，点位于文件名的开头。文件内容如下：

NEXT_PUBLIC_GA_TRACKING_ID=insert-key-here

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

// In jest.config.js : 

module.exports = 
 ....
    setupFiles: ["<rootDir>/test/setup-tests.ts"]



// The file test/test-setup.ts:

import dotenv from 'dotenv';
dotenv.config(path: './config.env.test');

您也可以查看this article了解更多详情。

【讨论】：

谢谢 - 我有这个 env 文件，我更想知道如何将那个 env 文件加载到 jest 中？