如何在构建期间排除 next.js 中的测试文件？答案

【问题标题】：How to exclude test files in next.js during build?如何在构建期间排除 next.js 中的测试文件？
【发布时间】：2022-07-05 16:54:51
【问题描述】：

我正在页面目录中创建带有测试的 next.js 应用程序。为此，我已将配置添加到 next.config.js

const { i18n } = require('./next-i18next.config');

const nextConfig = {
    reactStrictMode: true,
    pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'],
    styledComponents: true,
    i18n,
};

module.exports = nextConfig;

我的所有页面都有扩展名 page.tsx。例如 Home.page.tsx。我的测试文件命名如下：Home.spec.tsx。

问题是，我的测试文件仍然包含在构建中。我确实在我的 tsconfig 文件中排除了它们

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noEmit": true,
        "esModuleInterop": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "jsx": "preserve",
        "incremental": true,
        "types": ["node", "jest", "@testing-library/jest-dom"]
    },
    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
    "exclude": ["node_modules", "**/*.spec.ts", "**/*.spec.tsx"]
}

我不知道我还能做什么

【问题讨论】：

你能分享更多细节吗？您的 pages 目录的结构是什么？

标签： reactjs typescript webpack jestjs next.js

【解决方案1】：

不要将您的测试放在 pages 目录中。如果你这样做了，NextJS 会认为这个文件是你应用程序的一个路由，当你尝试构建你的应用程序时，你会得到这样的错误。

您可以将.spec 文件放在任何其他文件夹中，例如/components，但不能将/pages。根据documentation，对于测试页面，您需要在根目录中创建一个__test__ 文件夹。

之后也可以随意更新您的排除设置：

{
"exclude": ["node_modules"]
}

【讨论】：