Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Unit testing docs produce broken project after following steps #8084

Closed
RobertWSaunders opened this issue Sep 12, 2018 · 6 comments
Closed

Unit testing docs produce broken project after following steps #8084

RobertWSaunders opened this issue Sep 12, 2018 · 6 comments
Labels
type: question or discussion Issue discussing or asking a question about Gatsby

Comments

@RobertWSaunders
Copy link
Contributor

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
Copy link
Contributor

kakadiadarpan commented Sep 13, 2018 •
edited
Loading

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?

@kakadiadarpan kakadiadarpan added the type: question or discussion Issue discussing or asking a question about Gatsby label Sep 13, 2018
@m-allanson
Copy link
Contributor

m-allanson commented Sep 13, 2018 •
edited
Loading

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 m-allanson mentioned this issue Sep 13, 2018
Merged
@m-allanson
Copy link
Contributor

I've opened a PR to remove the guide from the v1 docs: #8112

DSchau pushed a commit that referenced this issue Sep 13, 2018
@m-allanson @DSchau
Revert v2 docs in v1 branch (#8112)
3207a22 
Revert "Add Docs about Cypress, react-testing-library and testing of CSS-in-JS (#6708)"

This reverts commit 32be1dc.

These docs apply to Gatsby v2 specifically.

Refs #8084 

<!--
  Q. Which branch should I use for my pull request?
  A. Use `master` branch (probably).

  Q. Which branch if my change is an update to Gatsby v2?
  A. Definitely use `master` branch :)

  Q. Which branch if my change is an update to documentation or gatsbyjs.org?
  A. Use `master` branch. A Gatsby maintainer will copy your changes over to the `v1` branch for you

  Q. Which branch if my change is a bug fix for Gatsby v1?
  A. In this case, you should use the `v1` branch

  Q. Which branch if I'm still not sure?
  A. Use `master` branch. Ask in the PR if you're not sure and a Gatsby maintainer will be happy to help :)

  Note: We will only accept bug fixes for Gatsby v1. New features should be added to Gatsby v2.

  Learn more about contributing: https://www.gatsbyjs.org/docs/how-to-contribute/
-->
@RobertWSaunders
Copy link
Contributor Author

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
Copy link
Contributor

DSchau commented Sep 13, 2018

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

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

@DSchau DSchau closed this as completed Sep 13, 2018
@RobertWSaunders RobertWSaunders mentioned this issue Sep 13, 2018
Merged
@0xc0d3r
Copy link

0xc0d3r commented Aug 16, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
type: question or discussion Issue discussing or asking a question about Gatsby
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@m-allanson @DSchau @0xc0d3r @kakadiadarpan @RobertWSaunders