Gatsby: Unit testing docs produce broken project after following steps

[RobertWSaunders]

Description

I'm looking to use Jest in my project for testing. After following the Unit Testing documentation with a fresh project I get errors when trying to run either npm run build or npm run develop, i.e. the site will no longer build. I have a feeling that the errors are linked to competing Babel configuration between Jest and Gatsby. Throughout this entire process I can see how having a .babelrc in the root of the project would be really nice because it would make adding additional configuration easier for other modules requiring Babel configuration, someone mentioned this in another issue.

Steps to Reproduce

Create a new Gatsby project and follow the steps here to add Jest to your project, after doing so building the site results in errors. Alternatively I've created a project that does this for you to clone here.

I checked this on both version 1 and version 2 of Gatsby and I get the same result.

Expected Result

The website should be able to be built and Jest tests should be able to be run!

Actual Result

When running npm run build I get an error like this:

error Generating JavaScript bundles failed


  Error: ./.cache/production-app.js
  Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/robertsaunders/github/qhacks-website/node_modules/babel-preset-stage-0/lib/  index.js
      at createDescriptor (/Users/robertsaunders/github/qhacks-website/node_modules/@babel/core/lib/config/config-descriptors.js:178:11)
      at items.map (/Users/robertsaunders/github/qhacks-website/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
      at Array.map (<anonymous>)
      at createDescriptors (/Users/robertsaunders/github/qhacks-website/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
      at createPresetDescriptors (/Users/robertsaunders/github/qhacks-website/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
      at passPerPreset (/Users/robertsaunders/github/qhacks-website/node_modules/@babel/core/lib/config/config-descriptors.js:58:96)
      at cachedFunction (/Users/robertsaunders/github/qhacks-website/node_modules/@babel/core/lib/config/caching.js:33:19)
      at presets.presets (/Users/robertsaunders/github/qhacks-website/node_modules/@babel/core/lib/config/config-descriptors.js:29:84)
      at mergeChainOpts (/Users/robertsaunders/github/qhacks-website/node_modules/@babel/core/lib/config/config-chain.js:315:26)
      at /Users/robertsaunders/github/qhacks-website/node_modules/@babel/core/lib/config/config-chain.js:278:7
      at buildRootChain (/Users/robertsaunders/github/qhacks-website/node_modules/@babel/core/lib/config/config-chain.js:68:29)
      at loadPrivatePartialConfig (/Users/robertsaunders/github/qhacks-website/node_modules/@babel/core/lib/config/partial.js:57:55)
      at loadFullConfig (/Users/robertsaunders/github/qhacks-website/node_modules/@babel/core/lib/config/full.js:43:39)
      at transformSync (/Users/robertsaunders/github/qhacks-website/node_modules/@babel/core/lib/transform.js:41:38)
      at Object.transform (/Users/robertsaunders/github/qhacks-website/node_modules/@babel/core/lib/transform.js:22:38)
      at transpile (/Users/robertsaunders/github/qhacks-website/node_modules/babel-loader/lib/index.js:46:20)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `gatsby build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/robertsaunders/.npm/_logs/2018-09-12T13_51_54_503Z-debug.log

And when running npm run develop I get:

error There was an error compiling the html.js component for the development server.

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

  19 |
  20 | var createReactClass = require('./createClass');
> 21 | var onlyChild = require('./onlyChild');
     | ^
  22 |
  23 | var createElement = ReactElement.createElement;
  24 | var createFactory = ReactElement.createFactory;

  WebpackError:

  - React.js:21 createDescriptor
    ~/react/lib/React.js:21:1

  - develop-static-entry.js:37 items.map
    .cache/develop-static-entry.js:37:28


  - develop-static-entry.js:37 createDescriptors
    .cache/develop-static-entry.js:37:22

  - develop-static-entry.js:29 createPresetDescriptors
    .cache/develop-static-entry.js:29:5


  - index.js:24 mergeChainOpts
    ~/object-assign/index.js:24:1

  - React.js:121
    ~/react/lib/React.js:121:1

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] develop: `gatsby develop`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] develop script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/robertsaunders/.npm/_logs/2018-09-12T14_06_16_134Z-debug.log

Environment

System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 8.11.2 - /usr/local/bin/node
    Yarn: 1.7.0 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 69.0.3497.92
    Firefox: 58.0.2
    Safari: 11.1.2
  npmPackages:
    gatsby: ^1.9.277 => 1.9.277
    gatsby-link: ^1.6.46 => 1.6.46
    gatsby-plugin-react-helmet: ^2.0.11 => 2.0.11
  npmGlobalPackages:
    gatsby-cli: 2.0.0-rc.5
    gatsby: 1.9.273

[kakadiadarpan]

Hi @RobertWSaunders, I was able to setup unit testing with v2. You can check the repo here.

I think the repo you provided is broken because of the incorrect dependencies. The reason behind that being gatsby v1 uses babel v6, while in the documentation for Unit testing it mentions v7.

@pieh @m-allanson any thoughts on this?

[m-allanson]

Hmm this looks like a mistake in Gatsby's docs. The unit testing guide was recently added to the docs for Gatsby v2. It looks like the guide was then copied over to the v1 docs, which unfortunately doesn't work with Gatsby v1.

I can get your example project to build by changing the following in your package.json.

-    "gatsby": "^1.9.277",
-    "gatsby-link": "^1.6.46",
-    "gatsby-plugin-react-helmet": "^2.0.11",
+    "gatsby": "next",
+    "gatsby-plugin-react-helmet": "next",
+    "react": "^16.5.0",
+    "react-dom": "^16.5.0",

Edit: Apologies for the docs confusion, incorrect docs are the worst :(

[m-allanson]

I've opened a PR to remove the guide from the v1 docs: https://github.com/gatsbyjs/gatsby/pull/8112

[RobertWSaunders]

Awesome, thanks @m-allanson and @kakadiadarpan! I got it to work using your suggestions. I should really just migrate to v2 but I'm hesitant only because its still in beta! Thanks for the fast reply! 🔥

[DSchau]

I merged that PR, so I think we're good here :)

Thanks for the fix @m-allanson, and thanks for confirming @RobertWSaunders!

[0xc0d3r]

@m-allanson How to set up test cases for gatsby v1?