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

Question

index.test.ts我正在 Next.js 应用程序中为 API 路由编写集成测试，我想知道将文件放在目录下是否有任何问题/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);
  });
});

Answer 1

TL;DR：虽然默认情况下不可能，但您可以pages通过自pageExtensions定义next.config.js.

\n\n

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

\n

来自自定义页面扩展文档：

\n

\n

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

\n

\n

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

\n

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

\n

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

\n

通过此配置，仅考虑具有上述扩展名的页面。因此，您可以具有以下pages文件夹结构，其中包含共同定位的测试文件。

\n

pages/\n\xe2\x94\x9c\xe2\x94\x80 api/\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80 path.page.ts\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80 path.test.ts\n\xe2\x94\x9c\xe2\x94\x80 _app.page.ts\n\xe2\x94\x9c\xe2\x94\x80 _document.page.ts\n\xe2\x94\x9c\xe2\x94\x80 index.page.ts\n\xe2\x94\x94\xe2\x94\x80 index.test.ts\n

\n

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

\n