javascriptreactjsjestjsnext.js

Build error occurred ReferenceError: describe is not defined > During now.sh deployment


I'm using now.sh to deploy my nextjs (React) app. And the build is failing due to this error:

Build error occurred ReferenceError: describe is not defined

Not sure why this started happening, here is my .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"
  },

Full log:

running "npm run now-build"
> moon.holdings@2.0.0 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

The first test where the describe is used:

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/>));
    });
  });
});

next.config

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
    }
  }))
}

Solution

  • I removed the tests that covered the /pages directory. NextJS used pages for routing. Not sure why that was causing the problem, ran coverage and looks like pages wasn't necessary to cover.

    Hoping for a better answer from someone at the NextJS / Now.sh team, and I'll select that.