发生构建错误ReferenceError：describe is not Defined>在now.sh部署期间

Question

我正在使用 now.sh 部署我的 nextjs (React) 应用程序。由于此错误，构建失败：

Build error occurred
ReferenceError: describe is not defined

不知道为什么会发生这种情况，这是我的

.babelrc

{
  "env": {
    "development": {
      "compact": false,
      "presets": [
        "next/babel",
        "@zeit/next-typescript/babel"
      ],
      "plugins": [
        ["styled-components", {"ssr": true, "displayName": true}],
        ["@babel/plugin-proposal-decorators", {"legacy": true}]
      ]
    },
    "production": {
      "presets": [
        "next/babel",
        "@zeit/next-typescript/babel"
      ],
      "plugins": [
        ["styled-components", {"ssr": true, "displayName": true}],
        ["@babel/plugin-proposal-decorators", {"legacy": true}]
      ]
    },
    "test": {
      "compact": false,
      "presets": [
        "@babel/preset-typescript",
        ["next/babel", {"preset-env": { "modules": "commonjs" }}]
      ],
      "plugins": [
        ["styled-components", { "ssr": true, "displayName": true }],
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        ["babel-plugin-sass-vars"]
      ]
    }
  }
}

package.json

"engines" : { 
    "node" : ">=8.10.0 <11.0.0" 
  },
  "scripts": {
    "dev": "NODE_ENV=development next -p 7777",
    "build": "NODE_ENV=production next build",
    "start": "next -p 7777",
    "test": "NODE_ENV=test jest --no-cache",
    "test-watch": "NODE_ENV=test jest --watch --no-cache",
    "coverage": "NODE_ENV=test jest --coverage",
    "update-snap": "NODE_ENV=test jest --updateSnapshot"
  },

完整日志：

running "npm run now-build"
> [email protected] now-build /tmp/7418164
> next build
Creating an optimized production build ...
> Using external babel configuration
> Location: "/tmp/7418164/.babelrc"
> Build error occurred
ReferenceError: describe is not defined
    at Module.kAI8 (/tmp/7418164/.next/serverless/pages/__tests__/about.test.js:63996:1)
    at __webpack_require__ (/tmp/7418164/.next/serverless/pages/__tests__/about.test.js:23:31)
    at module.exports.+3sd.exports.__esModule (/tmp/7418164/.next/serverless/pages/__tests__/about.test.js:91:18)
    at Object.<anonymous> (/tmp/7418164/.next/serverless/pages/__tests__/about.test.js:94:10)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
npm
ERR! code ELIFECYCLE

使用描述的第一个测试：

import React from 'react'
import { shallow } from 'enzyme'
import toJson from 'enzyme-to-json'

import About from '../about.tsx'

describe('<About /> component', () => {
  describe('rendering', () => {
    const wrapper = shallow(<About />);
    it('should render a component matching the snapshot', () => {
      const tree = toJson(wrapper);
      expect(tree).toMatchSnapshot();
      expect(wrapper).toHaveLength(1);
      expect(wrapper.contains(<About/>));
    });
  });
});

下一个配置

module.exports = (phase, { defaultConfig }) => {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    module: {
      loaders: [
        {
          test: /\.json$/,
          loader: 'json-loader'
        }
      ]
    }
    // Note: Nextjs provides webpack above so you should not `require` it
    // Perform customizations to webpack config
    // Important: return the modified config
    config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//))
    return config
  }

  // ✅ Put the require call here.
  const withTypescript = require('@zeit/next-typescript')
  const withCSS = require('@zeit/next-sass')

  // withCSS({target: 'serverless'})
  return withTypescript(withCSS({
    webpack(config, options) {
      return config
    }
  }))
}

Answer 1

我删除了覆盖

/pages

目录的测试。 NextJS 使用页面进行路由。不知道为什么这会导致问题，运行覆盖范围，看起来页面没有必要覆盖。

希望 NextJS / Now.sh 团队的某个人能给出更好的答案，我会选择它。

Answer 2

简单修复：https://github.com/zeit/next.js/issues/3728#issuecomment-523789071

pageExtensions: ['page.tsx']

Answer 3

编辑：新的 Next.js v13 应用程序路由器不再需要此答案，它允许将其他文件与您的页面放在

/app

目录中。

如果您希望将非页面文件与页面放在

/pages

目录中，则可以使用 自定义页面扩展 强制页面的文件扩展名为

.page.js

。设置完成后，Next.js 将忽略文件扩展名中没有

.page

的所有文件。

next.config.js

module.exports = {
  // Force .page prefix on page files (ex. index.page.tsx) so generated files can be included in /pages directory without Next.js throwing build errors
  pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'],
}

我为此用例编写了一些尚未合并的文档https://github.com/vercel/next.js/pull/22740。上面的文档链接现在包含这些更改。

发现此问题的原始 Github 问题是 https://github.com/vercel/next.js/issues/3728#issuecomment-895568757。

请注意，使用新的 Next.js v13 应用程序路由器，不再需要这样做，因为您可以将其他文件与您的页面放在路由器

/app

目录中。如果您自定义了

pageExtensions

，此配置也将应用于应用程序路由器，并强制您也重命名

/app

中的页面。请参阅 https://github.com/vercel/next.js/issues/51478#issuecomment-1672314182，了解有关

pageExtensions

如何影响新应用程序路由器文件命名的更多详细信息。

Answer 4

一个选项，允许在页面文件夹内进行测试：

直接在

next.config.js

中更改 webpack 设置

module.exports = {
  webpack: (config, { webpack }) => {
    config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//))
    return config
  }
}

它忽略构建过程中找到的任何

__tests__

文件夹。