如何使用 MSW 测试具有环境变量的 API 端点

Question

我想测试需要 Next.js 中的环境变量的 Marvel api 端点，但我收到此错误：

错误：❌尝试访问客户端上的服务器端环境变量。

getHash src/services/api.ts:7:23
  5| const getTimestamp = () => Date.now().toString();
  6| const getHash = (timeStamp: string) =>
  7|   md5(timeStamp + env.MARVEL_API_PRIVATE_KEY + env.MARVEL_API_PUBLIC_KEY);

这是我到目前为止所拥有的：

import md5 from 'md5';

import { env } from '@/env';

const getTimestamp = () => Date.now().toString();
const getHash = (timeStamp: string) =>
  md5(timeStamp + env.MARVEL_API_PRIVATE_KEY + env.MARVEL_API_PUBLIC_KEY);

const timeStamp = getTimestamp();
const hash = getHash(timeStamp);
const query = `ts=${timeStamp}&apikey=${env.MARVEL_API_PUBLIC_KEY}&hash=${hash}`;

export const getCharacters = async () => {
  const url = `${env.MARVEL_API_URL}/characters?limit=50&${query}`;
  const response = await fetch(url);
  const data = response.json();

  return data;
};

还有城市固体废弃物处理程序：

import { HttpResponse, http } from 'msw';

export const handlers = [
  http.get('/characters', () => {
    return HttpResponse.json(
      {
        id: 1011334,
        name: '3-D Man',
      },
      { status: 200 },
    );
  }),
];

Answer 1

您还没有发布@/env 目录中的设置，但我猜测您没有正确加载它们。

您通常会在项目的根目录中拥有一个

.env

文件或

.env.local

（NextJS 支持）（因此不在任何特殊目录中）。然后，它会自动加载到

process.env

中供您导入。

因此，您可能需要删除 @/env 目录中的内容（或者只是将其设为项目根目录中的 .env 文件）。

然后设置：

KEY=VALUE
KEY2=VALUE2

然后你会像这样引用它们：

console.log(process.env.KEY)

此外，它可能与这里无关。但在 NextJS 中要公开公开环境变量，您需要在前面添加

NEXT_PUBLIC

，因此如果您确实想使用

MARVEL_API_PUBLIC_KEY

客户端，则需要将其设为

NEXT_PUBLIC_MARVEL_API_PUBLIC_KEY

NextJS 这里有 docs，包括一些关于在

.env*

文件中引用其他变量的有用内容