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

Question

我正在尝试使用 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,
        }),
      ],
    });

Answer 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())

Answer 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了解更多详情。