是否可以将测试文件放在 Next.js 的 pages 目录下？答案

【问题标题】：Is it possible to put test files under pages directory in Next.js?是否可以将测试文件放在 Next.js 的 pages 目录下？
【发布时间】：2022-01-25 16:35:59
【问题描述】：

我正在为 Next.js 应用程序中的 API 路由编写集成测试，我想知道将 index.test.ts 文件放在 /pages 目录下是否有任何问题。我希望测试尽可能接近文件，而不是必须在 __test__ 目录中映射项目结构。

./pages/api/path/index.ts

handler.get(async (req: NextApiRequest, res: NextApiResponse) => {
  ...
});

export default  handler;

./pages/api/path/index.test.ts

import { testClient } from "__test__/utils/testClient";

describe("Testing API  POST: /api", () => {
  test("Should return 401 when not authenticated", async () => {
    const request = testClient({ handler });
    const res = await request.post("/api/applications");
    expect(res.status).toEqual(401);
  });
});

【问题讨论】：

标签： javascript testing jestjs next.js

【解决方案1】：

默认情况下，Next.js 将考虑pages 文件夹下的任何以tsx、ts、jsx 或js 结尾的文件，用于构建页面/API 路由和路由。

来自Custom Page Extensions 文档：

Next.js 假定 pages 目录中的每个 tsx/ts/jsx/js 文件都是页面或 API 路由，并可能暴露出易受攻击的意外路由拒绝服务攻击，或者抛出如下错误构建生产包

在pages 文件夹（或任何子文件夹）中添加一个名为index.test.ts 的文件将包含该文件作为实际页面，并可能在构建期间引发错误。

您可以通过使用 next.config.js 中的 pageExtensions 属性修改 Next.js 期望的扩展来规避此问题。

module.exports = {
    // Default value is ['tsx', 'ts', 'jsx', 'js']
    pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js']
}

使用此配置，只会考虑具有上述扩展名的页面。因此，您可以拥有以下 pages 文件夹结构，以及位于同一位置的测试文件。

pages/
├─ api/
│   ├─ path.page.ts
│   └─ path.test.ts
├─ _app.page.ts
├─ _document.page.ts
├─ index.page.ts
└─ index.test.ts

path.test.ts 和 index.test.ts 都将被忽略。

【讨论】：