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

[Gatsby v2] Jest unit testing and configuration for Gatsby #5824

Closed
thescientist13 opened this issue Jun 9, 2018 · 39 comments
Closed

[Gatsby v2] Jest unit testing and configuration for Gatsby #5824

thescientist13 opened this issue Jun 9, 2018 · 39 comments
Assignees
@m-allanson
Labels
help wanted Issue with a clear description that the community can help with. type: bug An issue or pull request relating to a bug in Gatsby
Projects
Gatsby v2 Release

Comments

@thescientist13
Copy link
Contributor

thescientist13 commented Jun 9, 2018 •
edited

Description

I was working my way through the upgrade process to v2 for my website and wanted to report a couple things while running my unit tests with Jest and Gatsby v2 (coming from v1).

Cannot find module './pages.json' from 'gatsby-browser-entry.js'

I am seeing this in some specs when running unit tests

 FAIL  src/components/header/header.spec.jsx
  ● Test suite failed to run

    Cannot find module './pages.json' from 'gatsby-browser-entry.js'

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:169:17)
      at Object.<anonymous> (node_modules/gatsby/cache-dir/gatsby-browser-entry.js:20:37)

# component
import React from 'react';
import { Link } from 'gatsby';
import './header.css';

const Header = () => {
  return (
    <div className="header"> 
      <Link to="/">
        <header></header>
        <h2 className="caption">A DREAMER BY DESIGN</h2>
      </Link>
    </div>
  );
};

export default Header;

# spec
import * as React from 'react';
import { mount, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import Header from './header';

configure({ adapter: new Adapter() });

describe('Header Component', () => {
  let header;

  beforeEach(() => {
    header = mount(<Header/>);
  });

  it('should not be null', () => {
    expect(header).not.toBeNull();
    expect(header.find('.header').length).toEqual(1);
  });

});

Note sure if it is related to this issue?

.babelrc

Not so much an issue with Gatsby per se, but maybe worth an update somewhere in the docs, which I am happy to do as it is a change in expected behavior. (relative to v1)

I had a .babelrc file in the root of my project which was read by Jest to process JSX and ES2015+ syntax.

{
  "presets": ["react", "env"]
}

After the upgrade, Gatsby which now depends on Babel 7, will now reflect Babel's configuration resolution behavior, which will now defer to the consuming project's top level .babelrc instead, which generated this error

success onPostBootstrap — 0.001 s

info bootstrap finished - 3.68 s


error Generating JavaScript bundles failed


  Error: Cannot find module 'env'

  - v8-compile-cache.js:162 require.resolve
    [www.thegreenhouse.io]/[v8-compile-cache]/v8-compile-cache.js:162:23

  - babel-config.js:17 abstractConfig.presets.forEach.p
    [www.thegreenhouse.io]/[gatsby]/dist/utils/babel-config.js:17:61

  - Array.forEach

  - babel-config.js:17 buildConfig
    [www.thegreenhouse.io]/[gatsby]/dist/utils/babel-config.js:17:26

  - babel-config.js:52
    [www.thegreenhouse.io]/[gatsby]/dist/utils/babel-config.js:52:19

  - Generator.next

  - next_tick.js:131 _combinedTickCallback
    internal/process/next_tick.js:131:7

  - next_tick.js:180 process._tickCallback
    internal/process/next_tick.js:180:9


error An unexpected error occurred: "Command failed.
Exit code: 1
Command: sh
Arguments: -c yarn lint && rimraf ./public && gatsby build

Solution was to delete my .babelrc file and "move" the configuration over to Jest, per the recommendation here to avoid the conflict.

Steps to reproduce

  1. Followed the v2 Upgrade guide
  2. Updated relevant specs to use enzyme-adapter-react-16
  3. Moved Babel configuration to Jest (see description above ^)

Expected result

  1. Unit tests would continue to pass

Actual result

  1. Some tests fail with this error
success onPostBootstrap — 0.001 s

info bootstrap finished - 3.68 s


error Generating JavaScript bundles failed


  Error: Cannot find module 'env'

  - v8-compile-cache.js:162 require.resolve
    [www.thegreenhouse.io]/[v8-compile-cache]/v8-compile-cache.js:162:23

  - babel-config.js:17 abstractConfig.presets.forEach.p
    [www.thegreenhouse.io]/[gatsby]/dist/utils/babel-config.js:17:61

  - Array.forEach

  - babel-config.js:17 buildConfig
    [www.thegreenhouse.io]/[gatsby]/dist/utils/babel-config.js:17:26

  - babel-config.js:52
    [www.thegreenhouse.io]/[gatsby]/dist/utils/babel-config.js:52:19

  - Generator.next

  - next_tick.js:131 _combinedTickCallback
    internal/process/next_tick.js:131:7

  - next_tick.js:180 process._tickCallback
    internal/process/next_tick.js:180:9


error An unexpected error occurred: "Command failed.
Exit code: 1
Command: sh
Arguments: -c yarn lint && rimraf ./public && gatsby build

Environment

$ ./node_modules/.bin/gatsby info --clipboard

  System:
    OS: macOS High Sierra 10.13.5
    CPU: x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 8.9.4 - /usr/local/bin/node
    Yarn: 1.5.1 - ~/.yarn/bin/yarn
    npm: 5.6.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 67.0.3396.79
    Firefox: 60.0.1
    Safari: 11.1.1
  npmPackages:
    gatsby: next => 2.0.0-alpha.51
    gatsby-cli: ^1.1.58 => 1.1.58
    gatsby-plugin-google-analytics: next => 1.0.20-10
    gatsby-plugin-react-helmet: next => 2.0.12-7
    gatsby-plugin-sitemap: next => 1.2.14-10
    gatsby-plugin-typography: next => 2.0.1-11

File contents (if changed)

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: 'The Greenhouse I/O',
    siteUrl: 'https://www.thegreenhouse.io',
    description: 'Personal / portfolio website for The Greenhouse.'
  },
  plugins: [
    'gatsby-plugin-typography', 
    'gatsby-plugin-sitemap',
    'gatsby-plugin-react-helmet',
    {
      resolve: 'gatsby-plugin-google-analytics',
      options: {
        trackingId: 'xxx',
        head: true
      }
    }
  ]
};

package.json: N/A
gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

Thanks for everything and let me know if you need more info! The upgrade was straightforward for me and everything else is working as expected. 👍

Update

Original issue addressed here 🎉
@thescientist13 thescientist13 mentioned this issue Jun 9, 2018
Merged
13 tasks
@m-allanson m-allanson added type: bug An issue or pull request relating to a bug in Gatsby help wanted Issue with a clear description that the community can help with. labels Jun 12, 2018
@m-allanson
Copy link
Contributor

Thanks for the detailed write up!

Cannot find module './pages.json' from 'gatsby-browser-entry.js'

This seems like a bug that should be fixed. In v2 the Link component is exported from Gatsby itself. This is done in gatsby-browser-entry.js which also expects the pages.json file you see in your error messages. However this file is not available at node_modules/gatsby/cache-dir/pages.json as it's created in your project root at .cache/pages.json at build time.

A 'quick fix' for this would be to always have an empty pages.json file available. But maybe there's a cleaner way to export the Link component. @pieh do you have any thoughts on this?

.babelrc

Adding a note about this in the v2 migration guide would be very useful I think. I'd be be very happy to see a PR if you're interested? Maybe it could also link to the custom babelrc docs?

I'm glad to hear everything else went smoothly :)

@pieh
Copy link
Contributor

pieh commented Jun 13, 2018

Cannot find module './pages.json' from 'gatsby-browser-entry.js'

This seems like a bug that should be fixed. In v2 the Link component is exported from Gatsby itself. This is done in gatsby-browser-entry.js which also expects the pages.json file you see in your error messages. However this file is not available at node_modules/gatsby/cache-dir/pages.json as it's created in your project root at .cache/pages.json at build time.

A 'quick fix' for this would be to always have an empty pages.json file available. But maybe there's a cleaner way to export the Link component. @pieh do you have any thoughts on this?

That or maybe something like:

let pages
if (process.env.NODE_ENV === `test`) {
  pages = []
} else {
  import pagesJson from  "./pages.json"
  pages = pagesJson
}

instead of straight importing ./pages.json

@m-allanson m-allanson added this to To Do - v2 in Gatsby v2 Release via automation Jun 13, 2018
@thescientist13
Copy link
Contributor Author

thescientist13 commented Jun 13, 2018 •
edited

Thanks for the review @pieh and @m-allanson !

Will be happy to look into taking both of these tasks on (docs and pages.json)!

@thescientist13
Copy link
Contributor Author

@pieh
One thing that comes to mind is that generally import can only be used at the top level.

@pieh
Copy link
Contributor

pieh commented Jun 13, 2018

Hah, of course, my bad yeah

@thescientist13
Copy link
Contributor Author

thescientist13 commented Jun 13, 2018 •
edited

unless we relax the eslint rule...

@pieh
Copy link
Contributor

pieh commented Jun 13, 2018

Let's do what @m-allanson suggested.

@thescientist13
Copy link
Contributor Author

thescientist13 commented Jun 13, 2018 •
edited

I dropped in a pages.json file and copied the contents out of my own projects pages.json and a lot of scary things happened. 😞

here's what captured in my terminal

  console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
    Error: Uncaught [TypeError: Cannot read property 'history' of undefined]
        at reportException (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
        at invokeEventListeners (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:209:9)
        at HTMLUnknownElementImpl._dispatch (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
        at HTMLUnknownElementImpl.dispatchEvent (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
        at HTMLUnknownElementImpl.dispatchEvent (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
        at HTMLUnknownElement.dispatchEvent (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
        at Object.invokeGuardedCallbackDev (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:138:16)
        at invokeGuardedCallback (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:187:29)
        at replayUnitOfWork (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:15194:5)
        at renderRoot (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:15840:11) TypeError: Cannot read property 'history' of undefined
        at new GatsbyLink (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/gatsby-link/index.js:107:34)
        at constructClassInstance (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:11333:18)
        at updateClassComponent (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:13036:7)
        at beginWork (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:13715:14)
        at performUnitOfWork (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:15741:12)
        at workLoop (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:15780:24)
        at HTMLUnknownElement.callCallback (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:100:14)
        at invokeEventListeners (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:193:27)
        at HTMLUnknownElementImpl._dispatch (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
        at HTMLUnknownElementImpl.dispatchEvent (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
        at HTMLUnknownElementImpl.dispatchEvent (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
        at HTMLUnknownElement.dispatchEvent (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
        at Object.invokeGuardedCallbackDev (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:138:16)
        at invokeGuardedCallback (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:187:29)
        at replayUnitOfWork (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:15194:5)
        at renderRoot (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:15840:11)
        at performWorkOnRoot (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:16437:22)
        at performWork (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:16358:7)
        at performSyncWork (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:16330:3)
        at requestWork (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:16230:5)
        at scheduleWork$1 (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:16096:11)
        at scheduleRootUpdate (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:16663:3)
        at updateContainerAtExpirationTime (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:16690:10)
        at updateContainer (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:16717:10)
        at ReactRoot.Object.<anonymous>.ReactRoot.render (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:17000:3)
        at /Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:17140:14
        at unbatchedUpdates (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:16557:10)
        at legacyRenderSubtreeIntoContainer (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:17136:5)
        at Object.render (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:17195:12)
        at Object.render (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:218:50)
        at new ReactWrapper (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/enzyme/build/ReactWrapper.js:98:16)
        at mount (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/enzyme/build/mount.js:19:10)
        at Object.<anonymous> (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/test/integration/pages/about.spec.jsx:27:31)
        at Object.asyncFn (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jest-jasmine2/build/jasmine_async.js:51:37)
        at resolve (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jest-jasmine2/build/queue_runner.js:52:12)
        at new Promise (<anonymous>)
        at mapper (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jest-jasmine2/build/queue_runner.js:39:19)
        at promise.then (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jest-jasmine2/build/queue_runner.js:73:82)
        at <anonymous>
        at process._tickCallback (internal/process/next_tick.js:188:7)

  console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
    Error: Uncaught [TypeError: Cannot read property 'history' of undefined]
        at reportException (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
        at invokeEventListeners (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:209:9)
        at HTMLUnknownElementImpl._dispatch (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
        at HTMLUnknownElementImpl.dispatchEvent (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
        at HTMLUnknownElementImpl.dispatchEvent (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
        at HTMLUnknownElement.dispatchEvent (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
        at Object.invokeGuardedCallbackDev (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:138:16)
        at invokeGuardedCallback (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:187:29)
        at replayUnitOfWork (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:15194:5)
        at renderRoot (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:15840:11) TypeError: Cannot read property 'history' of undefined
        at new GatsbyLink (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/gatsby-link/index.js:107:34)
        at constructClassInstance (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:11333:18)
        at updateClassComponent (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:13036:7)
        at beginWork (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:13715:14)
        at performUnitOfWork (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:15741:12)
        at workLoop (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:15780:24)
        at HTMLUnknownElement.callCallback (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:100:14)
        at invokeEventListeners (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:193:27)
        at HTMLUnknownElementImpl._dispatch (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
        at HTMLUnknownElementImpl.dispatchEvent (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
        at HTMLUnknownElementImpl.dispatchEvent (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
        at HTMLUnknownElement.dispatchEvent (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
        at Object.invokeGuardedCallbackDev (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:138:16)
        at invokeGuardedCallback (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:187:29)
        at replayUnitOfWork (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:15194:5)
        at renderRoot (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:15840:11)
        at performWorkOnRoot (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:16437:22)
        at performWork (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:16358:7)
        at performSyncWork (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:16330:3)
        at requestWork (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:16230:5)
        at scheduleWork$1 (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:16096:11)
        at scheduleRootUpdate (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:16663:3)
        at updateContainerAtExpirationTime (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:16690:10)
        at updateContainer (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:16717:10)
        at ReactRoot.Object.<anonymous>.ReactRoot.render (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:17000:3)
        at /Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:17140:14
        at unbatchedUpdates (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:16557:10)
        at legacyRenderSubtreeIntoContainer (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:17136:5)
        at Object.render (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:17195:12)
        at Object.render (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:218:50)
        at new ReactWrapper (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/enzyme/build/ReactWrapper.js:98:16)
        at mount (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/enzyme/build/mount.js:19:10)
        at Object.<anonymous> (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/test/integration/pages/about.spec.jsx:27:31)
        at Object.asyncFn (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jest-jasmine2/build/jasmine_async.js:51:37)
        at resolve (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jest-jasmine2/build/queue_runner.js:52:12)
        at new Promise (<anonymous>)
        at mapper (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jest-jasmine2/build/queue_runner.js:39:19)
        at promise.then (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jest-jasmine2/build/queue_runner.js:73:82)
        at <anonymous>
        at process._tickCallback (internal/process/next_tick.js:188:7)

  console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
    Error: Uncaught [TypeError: Cannot read property 'history' of undefined]
        at reportException (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
        at invokeEventListeners (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:209:9)
        at HTMLUnknownElementImpl._dispatch (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
        at HTMLUnknownElementImpl.dispatchEvent (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
        at HTMLUnknownElementImpl.dispatchEvent (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
        at HTMLUnknownElement.dispatchEvent (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
        at Object.invokeGuardedCallbackDev (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:138:16)
        at invokeGuardedCallback (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:187:29)
        at replayUnitOfWork (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:15194:5)
        at renderRoot (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:15840:11) TypeError: Cannot read property 'history' of undefined
        at new GatsbyLink (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/gatsby-link/index.js:107:34)
        at constructClassInstance (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:11333:18)
        at updateClassComponent (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:13036:7)
        at beginWork (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:13715:14)
        at performUnitOfWork (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:15741:12)
        at workLoop (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:15780:24)
        at HTMLUnknownElement.callCallback (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:100:14)
        at invokeEventListeners (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:193:27)
        at HTMLUnknownElementImpl._dispatch (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
        at HTMLUnknownElementImpl.dispatchEvent (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
        at HTMLUnknownElementImpl.dispatchEvent (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
        at HTMLUnknownElement.dispatchEvent (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
        at Object.invokeGuardedCallbackDev (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:138:16)
        at invokeGuardedCallback (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:187:29)
        at replayUnitOfWork (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:15194:5)
        at renderRoot (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:15840:11)
        at performWorkOnRoot (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:16437:22)
        at performWork (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:16358:7)
        at performSyncWork (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:16330:3)
        at requestWork (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:16230:5)
        at scheduleWork$1 (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:16096:11)
        at scheduleRootUpdate (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:16663:3)
        at updateContainerAtExpirationTime (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:16690:10)
        at updateContainer (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:16717:10)
        at ReactRoot.Object.<anonymous>.ReactRoot.render (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:17000:3)
        at /Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:17140:14
        at unbatchedUpdates (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:16557:10)
        at legacyRenderSubtreeIntoContainer (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:17136:5)
        at Object.render (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/react-dom/cjs/react-dom.development.js:17195:12)
        at Object.render (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:218:50)
        at new ReactWrapper (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/enzyme/build/ReactWrapper.js:98:16)
        at mount (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/enzyme/build/mount.js:19:10)
        at Object.<anonymous> (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/test/integration/pages/about.spec.jsx:27:31)
        at Object.asyncFn (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jest-jasmine2/build/jasmine_async.js:51:37)
        at resolve (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jest-jasmine2/build/queue_runner.js:52:12)
        at new Promise (<anonymous>)
        at mapper (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jest-jasmine2/build/queue_runner.js:39:19)
        at promise.then (/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/node_modules/jest-jasmine2/build/queue_runner.js:73:82)
        at <anonymous>
        at process._tickCallback (internal/process/next_tick.js:188:7)

  console.error node_modules/react-dom/cjs/react-dom.development.js:14113
    The above error occurred in the <GatsbyLink> component:
        in GatsbyLink (created by Header)
        in div (created by Header)
        in Header (created by Layout)
        in section (created by Layout)
        in div (created by Layout)
        in Layout (created by PublicationsPage)
        in PublicationsPage (created by WrapperComponent)
        in WrapperComponent

    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

  console.error node_modules/react-dom/cjs/react-dom.development.js:14113
    The above error occurred in the <GatsbyLink> component:
        in GatsbyLink (created by Naviagation)
        in li (created by Naviagation)
        in ul (created by Naviagation)
        in nav (created by Naviagation)
        in div (created by Naviagation)
        in Naviagation (created by Layout)
        in section (created by Layout)
        in div (created by Layout)
        in Layout (created by PublicationsPage)
        in PublicationsPage (created by WrapperComponent)
        in WrapperComponent

    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

  console.error node_modules/react-dom/cjs/react-dom.development.js:14113
    The above error occurred in the <GatsbyLink> component:
        in GatsbyLink (created by Naviagation)
        in li (created by Naviagation)
        in ul (created by Naviagation)
        in nav (created by Naviagation)
        in div (created by Naviagation)
        in Naviagation (created by Layout)
        in section (created by Layout)
        in div (created by Layout)
        in Layout (created by PublicationsPage)
        in PublicationsPage (created by WrapperComponent)
        in WrapperComponent

    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

  console.error node_modules/react-dom/cjs/react-dom.development.js:14113
    The above error occurred in the <GatsbyLink> component:
        in GatsbyLink (created by Naviagation)
        in li (created by Naviagation)
        in ul (created by Naviagation)
        in nav (created by Naviagation)
        in div (created by Naviagation)
        in Naviagation (created by Layout)
        in section (created by Layout)
        in div (created by Layout)
        in Layout (created by PublicationsPage)
 FAIL  test/integration/pages/about.spec.jsxperComponent)
  About Page
    default state
      ✕ should be defined (165ms)
      ✕ should have a sub heading (99ms)
      ✕ should have sub nav links (64ms)
      ✕ should have a content section (41ms)
      ✕ should have the Speaking Content section be the active section by default (60ms)
      ✕ should NOT have any other content sections displayed by default (78ms)
      ✕ should have articles (52ms)
      ✕ should have presentations (63ms)
      ✕ should have social links (75ms)
    Speaking Content Section
      ✕ should display the speaking content when the link is clicked after another click (54ms)
    Writing Content Section
      ✕ should display speaking content when the speaking link is clicked (43ms)
      ✕ should have a call to action when displayed (31ms)

  ● About Page › default state › should be defined

    TypeError: Cannot read property 'history' of undefined

      10 |
      11 |   beforeEach(() => {
    > 12 |     about = mount(<About/>);
      13 |   });
      14 |
      15 |   describe('default state', () => {

      at new GatsbyLink (node_modules/gatsby-link/index.js:107:34)
      at constructClassInstance (node_modules/react-dom/cjs/react-dom.development.js:11333:18)
      at updateClassComponent (node_modules/react-dom/cjs/react-dom.development.js:13036:7)
      at beginWork (node_modules/react-dom/cjs/react-dom.development.js:13715:14)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:15741:12)
      at workLoop (node_modules/react-dom/cjs/react-dom.development.js:15780:24)
      at renderRoot (node_modules/react-dom/cjs/react-dom.development.js:15820:7)
      at performWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:16437:22)
      at performWork (node_modules/react-dom/cjs/react-dom.development.js:16358:7)
      at performSyncWork (node_modules/react-dom/cjs/react-dom.development.js:16330:3)
      at requestWork (node_modules/react-dom/cjs/react-dom.development.js:16230:5)
      at scheduleWork$1 (node_modules/react-dom/cjs/react-dom.development.js:16096:11)
      at scheduleRootUpdate (node_modules/react-dom/cjs/react-dom.development.js:16663:3)
      at updateContainerAtExpirationTime (node_modules/react-dom/cjs/react-dom.development.js:16690:10)
      at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:16717:10)
      at ReactRoot.Object.<anonymous>.ReactRoot.render (node_modules/react-dom/cjs/react-dom.development.js:17000:3)
      at node_modules/react-dom/cjs/react-dom.development.js:17140:14
      at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:16557:10)
      at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:17136:5)
      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:17195:12)
      at Object.render (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:218:50)
      at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:98:16)
      at mount (node_modules/enzyme/build/mount.js:19:10)
      at Object.<anonymous> (test/integration/pages/about.spec.jsx:12:13)

  ● About Page › default state › should be defined

    expect(received).toBeDefined()

    Expected value to be defined, instead received
      undefined

      16 |
      17 |     it('should be defined', () => {
    > 18 |       expect(about).toBeDefined();
      19 |       expect(about.find('#about').length).toBe(1);
      20 |     });
      21 |

      at Object.<anonymous> (test/integration/pages/about.spec.jsx:18:21)

  ● About Page › default state › should have a sub heading

    TypeError: Cannot read property 'history' of undefined

      10 |
      11 |   beforeEach(() => {
    > 12 |     about = mount(<About/>);
      13 |   });
      14 |
      15 |   describe('default state', () => {

      at new GatsbyLink (node_modules/gatsby-link/index.js:107:34)
      at constructClassInstance (node_modules/react-dom/cjs/react-dom.development.js:11333:18)
      at updateClassComponent (node_modules/react-dom/cjs/react-dom.development.js:13036:7)
      at beginWork (node_modules/react-dom/cjs/react-dom.development.js:13715:14)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:15741:12)
      at workLoop (node_modules/react-dom/cjs/react-dom.development.js:15780:24)
      at renderRoot (node_modules/react-dom/cjs/react-dom.development.js:15820:7)
      at performWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:16437:22)
      at performWork (node_modules/react-dom/cjs/react-dom.development.js:16358:7)
      at performSyncWork (node_modules/react-dom/cjs/react-dom.development.js:16330:3)
      at requestWork (node_modules/react-dom/cjs/react-dom.development.js:16230:5)
      at scheduleWork$1 (node_modules/react-dom/cjs/react-dom.development.js:16096:11)
      at scheduleRootUpdate (node_modules/react-dom/cjs/react-dom.development.js:16663:3)
      at updateContainerAtExpirationTime (node_modules/react-dom/cjs/react-dom.development.js:16690:10)
      at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:16717:10)
      at ReactRoot.Object.<anonymous>.ReactRoot.render (node_modules/react-dom/cjs/react-dom.development.js:17000:3)
      at node_modules/react-dom/cjs/react-dom.development.js:17140:14
      at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:16557:10)
      at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:17136:5)
      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:17195:12)
      at Object.render (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:218:50)
      at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:98:16)
      at mount (node_modules/enzyme/build/mount.js:19:10)
      at Object.<anonymous> (test/integration/pages/about.spec.jsx:12:13)

  ● About Page › default state › should have a sub heading

    TypeError: Cannot read property 'find' of undefined

      21 |
      22 |     it('should have a sub heading', () => {
    > 23 |       const subHeading = about.find('.sub-heading');
      24 |
      25 |       expect(subHeading.length).toBe(1);
      26 |       expect(subHeading.text()).toBeDefined();

      at Object.<anonymous> (test/integration/pages/about.spec.jsx:23:32)

  ● About Page › default state › should have sub nav links

    TypeError: Cannot read property 'history' of undefined

      10 |
      11 |   beforeEach(() => {
    > 12 |     about = mount(<About/>);
      13 |   });
      14 |
      15 |   describe('default state', () => {

      at new GatsbyLink (node_modules/gatsby-link/index.js:107:34)
      at constructClassInstance (node_modules/react-dom/cjs/react-dom.development.js:11333:18)
      at updateClassComponent (node_modules/react-dom/cjs/react-dom.development.js:13036:7)
      at beginWork (node_modules/react-dom/cjs/react-dom.development.js:13715:14)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:15741:12)
      at workLoop (node_modules/react-dom/cjs/react-dom.development.js:15780:24)
      at renderRoot (node_modules/react-dom/cjs/react-dom.development.js:15820:7)
      at performWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:16437:22)
      at performWork (node_modules/react-dom/cjs/react-dom.development.js:16358:7)
      at performSyncWork (node_modules/react-dom/cjs/react-dom.development.js:16330:3)
      at requestWork (node_modules/react-dom/cjs/react-dom.development.js:16230:5)
      at scheduleWork$1 (node_modules/react-dom/cjs/react-dom.development.js:16096:11)
      at scheduleRootUpdate (node_modules/react-dom/cjs/react-dom.development.js:16663:3)
      at updateContainerAtExpirationTime (node_modules/react-dom/cjs/react-dom.development.js:16690:10)
      at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:16717:10)
      at ReactRoot.Object.<anonymous>.ReactRoot.render (node_modules/react-dom/cjs/react-dom.development.js:17000:3)
      at node_modules/react-dom/cjs/react-dom.development.js:17140:14
      at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:16557:10)
      at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:17136:5)
      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:17195:12)
      at Object.render (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:218:50)
      at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:98:16)
      at mount (node_modules/enzyme/build/mount.js:19:10)
      at Object.<anonymous> (test/integration/pages/about.spec.jsx:12:13)

  ● About Page › default state › should have sub nav links

    TypeError: Cannot read property 'find' of undefined

      28 |
      29 |     it('should have sub nav links', () => {
    > 30 |       const subHeading = about.find('.content-links');
      31 |       const links = subHeading.find('h2');
      32 |
      33 |       expect(subHeading.length).toBe(1);

      at Object.<anonymous> (test/integration/pages/about.spec.jsx:30:32)

  ● About Page › default state › should have a content section

    TypeError: Cannot read property 'history' of undefined

      10 |
      11 |   beforeEach(() => {
    > 12 |     about = mount(<About/>);
      13 |   });
      14 |
      15 |   describe('default state', () => {

      at new GatsbyLink (node_modules/gatsby-link/index.js:107:34)
      at constructClassInstance (node_modules/react-dom/cjs/react-dom.development.js:11333:18)
      at updateClassComponent (node_modules/react-dom/cjs/react-dom.development.js:13036:7)
      at beginWork (node_modules/react-dom/cjs/react-dom.development.js:13715:14)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:15741:12)
      at workLoop (node_modules/react-dom/cjs/react-dom.development.js:15780:24)
      at renderRoot (node_modules/react-dom/cjs/react-dom.development.js:15820:7)
      at performWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:16437:22)
      at performWork (node_modules/react-dom/cjs/react-dom.development.js:16358:7)
      at performSyncWork (node_modules/react-dom/cjs/react-dom.development.js:16330:3)
      at requestWork (node_modules/react-dom/cjs/react-dom.development.js:16230:5)
      at scheduleWork$1 (node_modules/react-dom/cjs/react-dom.development.js:16096:11)
      at scheduleRootUpdate (node_modules/react-dom/cjs/react-dom.development.js:16663:3)
      at updateContainerAtExpirationTime (node_modules/react-dom/cjs/react-dom.development.js:16690:10)
      at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:16717:10)
      at ReactRoot.Object.<anonymous>.ReactRoot.render (node_modules/react-dom/cjs/react-dom.development.js:17000:3)
      at node_modules/react-dom/cjs/react-dom.development.js:17140:14
      at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:16557:10)
      at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:17136:5)
      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:17195:12)
      at Object.render (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:218:50)
      at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:98:16)
      at mount (node_modules/enzyme/build/mount.js:19:10)
      at Object.<anonymous> (test/integration/pages/about.spec.jsx:12:13)

  ● About Page › default state › should have a content section

    TypeError: Cannot read property 'find' of undefined

      37 |
      38 |     it('should have a content section', () => {
    > 39 |       const subHeading = about.find('.content-output');
      40 |
      41 |       expect(subHeading.length).toBe(1);
      42 |       expect(subHeading.text()).toBeDefined();

      at Object.<anonymous> (test/integration/pages/about.spec.jsx:39:32)

  ● About Page › default state › should have the Speaking Content section be the active section by default

    TypeError: Cannot read property 'history' of undefined

      10 |
      11 |   beforeEach(() => {
    > 12 |     about = mount(<About/>);
      13 |   });
      14 |
      15 |   describe('default state', () => {

      at new GatsbyLink (node_modules/gatsby-link/index.js:107:34)
      at constructClassInstance (node_modules/react-dom/cjs/react-dom.development.js:11333:18)
      at updateClassComponent (node_modules/react-dom/cjs/react-dom.development.js:13036:7)
      at beginWork (node_modules/react-dom/cjs/react-dom.development.js:13715:14)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:15741:12)
      at workLoop (node_modules/react-dom/cjs/react-dom.development.js:15780:24)
      at renderRoot (node_modules/react-dom/cjs/react-dom.development.js:15820:7)
      at performWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:16437:22)
      at performWork (node_modules/react-dom/cjs/react-dom.development.js:16358:7)
      at performSyncWork (node_modules/react-dom/cjs/react-dom.development.js:16330:3)
      at requestWork (node_modules/react-dom/cjs/react-dom.development.js:16230:5)
      at scheduleWork$1 (node_modules/react-dom/cjs/react-dom.development.js:16096:11)
      at scheduleRootUpdate (node_modules/react-dom/cjs/react-dom.development.js:16663:3)
      at updateContainerAtExpirationTime (node_modules/react-dom/cjs/react-dom.development.js:16690:10)
      at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:16717:10)
      at ReactRoot.Object.<anonymous>.ReactRoot.render (node_modules/react-dom/cjs/react-dom.development.js:17000:3)
      at node_modules/react-dom/cjs/react-dom.development.js:17140:14
      at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:16557:10)
      at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:17136:5)
      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:17195:12)
      at Object.render (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:218:50)
      at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:98:16)
      at mount (node_modules/enzyme/build/mount.js:19:10)
      at Object.<anonymous> (test/integration/pages/about.spec.jsx:12:13)

  ● About Page › default state › should have the Speaking Content section be the active section by default

    TypeError: Cannot read property 'state' of undefined

      44 |
      45 |     it('should have the Speaking Content section be the active section by default', () => {
    > 46 |       expect(about.state().activeSection).toBe('SPEAKING');
      47 |       expect(about.find('.content-speaking').length).toBe(1);
      48 |     });
      49 |

      at Object.<anonymous> (test/integration/pages/about.spec.jsx:46:20)

  ● About Page › default state › should NOT have any other content sections displayed by default

    TypeError: Cannot read property 'history' of undefined

      10 |
      11 |   beforeEach(() => {
    > 12 |     about = mount(<About/>);
      13 |   });
      14 |
      15 |   describe('default state', () => {

      at new GatsbyLink (node_modules/gatsby-link/index.js:107:34)
      at constructClassInstance (node_modules/react-dom/cjs/react-dom.development.js:11333:18)
      at updateClassComponent (node_modules/react-dom/cjs/react-dom.development.js:13036:7)
      at beginWork (node_modules/react-dom/cjs/react-dom.development.js:13715:14)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:15741:12)
      at workLoop (node_modules/react-dom/cjs/react-dom.development.js:15780:24)
      at renderRoot (node_modules/react-dom/cjs/react-dom.development.js:15820:7)
      at performWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:16437:22)
      at performWork (node_modules/react-dom/cjs/react-dom.development.js:16358:7)
      at performSyncWork (node_modules/react-dom/cjs/react-dom.development.js:16330:3)
      at requestWork (node_modules/react-dom/cjs/react-dom.development.js:16230:5)
      at scheduleWork$1 (node_modules/react-dom/cjs/react-dom.development.js:16096:11)
      at scheduleRootUpdate (node_modules/react-dom/cjs/react-dom.development.js:16663:3)
      at updateContainerAtExpirationTime (node_modules/react-dom/cjs/react-dom.development.js:16690:10)
      at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:16717:10)
      at ReactRoot.Object.<anonymous>.ReactRoot.render (node_modules/react-dom/cjs/react-dom.development.js:17000:3)
      at node_modules/react-dom/cjs/react-dom.development.js:17140:14
      at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:16557:10)
      at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:17136:5)
      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:17195:12)
      at Object.render (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:218:50)
      at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:98:16)
      at mount (node_modules/enzyme/build/mount.js:19:10)
      at Object.<anonymous> (test/integration/pages/about.spec.jsx:12:13)

  ● About Page › default state › should NOT have any other content sections displayed by default

    TypeError: Cannot read property 'find' of undefined

      49 |
      50 |     it('should NOT have any other content sections displayed by default', () => {
    > 51 |       expect(about.find('.content-writing').length).toBe(0);
      52 |     });
      53 |
      54 |     it('should have articles', () => {

      at Object.<anonymous> (test/integration/pages/about.spec.jsx:51:20)

  ● About Page › default state › should have articles

    TypeError: Cannot read property 'history' of undefined

      10 |
      11 |   beforeEach(() => {
    > 12 |     about = mount(<About/>);
      13 |   });
      14 |
      15 |   describe('default state', () => {

      at new GatsbyLink (node_modules/gatsby-link/index.js:107:34)
      at constructClassInstance (node_modules/react-dom/cjs/react-dom.development.js:11333:18)
      at updateClassComponent (node_modules/react-dom/cjs/react-dom.development.js:13036:7)
      at beginWork (node_modules/react-dom/cjs/react-dom.development.js:13715:14)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:15741:12)
      at workLoop (node_modules/react-dom/cjs/react-dom.development.js:15780:24)
      at renderRoot (node_modules/react-dom/cjs/react-dom.development.js:15820:7)
      at performWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:16437:22)
      at performWork (node_modules/react-dom/cjs/react-dom.development.js:16358:7)
      at performSyncWork (node_modules/react-dom/cjs/react-dom.development.js:16330:3)
      at requestWork (node_modules/react-dom/cjs/react-dom.development.js:16230:5)
      at scheduleWork$1 (node_modules/react-dom/cjs/react-dom.development.js:16096:11)
      at scheduleRootUpdate (node_modules/react-dom/cjs/react-dom.development.js:16663:3)
      at updateContainerAtExpirationTime (node_modules/react-dom/cjs/react-dom.development.js:16690:10)
      at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:16717:10)
      at ReactRoot.Object.<anonymous>.ReactRoot.render (node_modules/react-dom/cjs/react-dom.development.js:17000:3)
      at node_modules/react-dom/cjs/react-dom.development.js:17140:14
      at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:16557:10)
      at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:17136:5)
      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:17195:12)
      at Object.render (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:218:50)
      at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:98:16)
      at mount (node_modules/enzyme/build/mount.js:19:10)
      at Object.<anonymous> (test/integration/pages/about.spec.jsx:12:13)

  ● About Page › default state › should have articles

    TypeError: Cannot read property 'state' of undefined

      53 |
      54 |     it('should have articles', () => {
    > 55 |       expect(about.state().articles.length).toBeGreaterThanOrEqual(1);
      56 |     });
      57 |
      58 |     it('should have presentations', () => {

      at Object.<anonymous> (test/integration/pages/about.spec.jsx:55:20)

  ● About Page › default state › should have presentations

    TypeError: Cannot read property 'history' of undefined

      10 |
      11 |   beforeEach(() => {
    > 12 |     about = mount(<About/>);
      13 |   });
      14 |
      15 |   describe('default state', () => {

      at new GatsbyLink (node_modules/gatsby-link/index.js:107:34)
      at constructClassInstance (node_modules/react-dom/cjs/react-dom.development.js:11333:18)
      at updateClassComponent (node_modules/react-dom/cjs/react-dom.development.js:13036:7)
      at beginWork (node_modules/react-dom/cjs/react-dom.development.js:13715:14)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:15741:12)
      at workLoop (node_modules/react-dom/cjs/react-dom.development.js:15780:24)
      at renderRoot (node_modules/react-dom/cjs/react-dom.development.js:15820:7)
      at performWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:16437:22)
      at performWork (node_modules/react-dom/cjs/react-dom.development.js:16358:7)
      at performSyncWork (node_modules/react-dom/cjs/react-dom.development.js:16330:3)
      at requestWork (node_modules/react-dom/cjs/react-dom.development.js:16230:5)
      at scheduleWork$1 (node_modules/react-dom/cjs/react-dom.development.js:16096:11)
      at scheduleRootUpdate (node_modules/react-dom/cjs/react-dom.development.js:16663:3)
      at updateContainerAtExpirationTime (node_modules/react-dom/cjs/react-dom.development.js:16690:10)
      at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:16717:10)
      at ReactRoot.Object.<anonymous>.ReactRoot.render (node_modules/react-dom/cjs/react-dom.development.js:17000:3)
      at node_modules/react-dom/cjs/react-dom.development.js:17140:14
      at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:16557:10)
      at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:17136:5)
      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:17195:12)
      at Object.render (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:218:50)
      at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:98:16)
      at mount (node_modules/enzyme/build/mount.js:19:10)
      at Object.<anonymous> (test/integration/pages/about.spec.jsx:12:13)

  ● About Page › default state › should have presentations

    TypeError: Cannot read property 'state' of undefined

      57 |
      58 |     it('should have presentations', () => {
    > 59 |       expect(about.state().presentations.length).toBeGreaterThanOrEqual(1);
      60 |     });
      61 |
      62 |     it('should have social links', () => {

      at Object.<anonymous> (test/integration/pages/about.spec.jsx:59:20)

  ● About Page › default state › should have social links

    TypeError: Cannot read property 'history' of undefined

      10 |
      11 |   beforeEach(() => {
    > 12 |     about = mount(<About/>);
      13 |   });
      14 |
      15 |   describe('default state', () => {

      at new GatsbyLink (node_modules/gatsby-link/index.js:107:34)
      at constructClassInstance (node_modules/react-dom/cjs/react-dom.development.js:11333:18)
      at updateClassComponent (node_modules/react-dom/cjs/react-dom.development.js:13036:7)
      at beginWork (node_modules/react-dom/cjs/react-dom.development.js:13715:14)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:15741:12)
      at workLoop (node_modules/react-dom/cjs/react-dom.development.js:15780:24)
      at renderRoot (node_modules/react-dom/cjs/react-dom.development.js:15820:7)
      at performWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:16437:22)
      at performWork (node_modules/react-dom/cjs/react-dom.development.js:16358:7)
      at performSyncWork (node_modules/react-dom/cjs/react-dom.development.js:16330:3)
      at requestWork (node_modules/react-dom/cjs/react-dom.development.js:16230:5)
      at scheduleWork$1 (node_modules/react-dom/cjs/react-dom.development.js:16096:11)
      at scheduleRootUpdate (node_modules/react-dom/cjs/react-dom.development.js:16663:3)
      at updateContainerAtExpirationTime (node_modules/react-dom/cjs/react-dom.development.js:16690:10)
      at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:16717:10)
      at ReactRoot.Object.<anonymous>.ReactRoot.render (node_modules/react-dom/cjs/react-dom.development.js:17000:3)
      at node_modules/react-dom/cjs/react-dom.development.js:17140:14
      at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:16557:10)
      at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:17136:5)
      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:17195:12)
      at Object.render (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:218:50)
      at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:98:16)
      at mount (node_modules/enzyme/build/mount.js:19:10)
      at Object.<anonymous> (test/integration/pages/about.spec.jsx:12:13)

  ● About Page › default state › should have social links

    TypeError: Cannot read property 'state' of undefined

      61 |
      62 |     it('should have social links', () => {
    > 63 |       expect(about.state().socialLinksMap).toBeDefined();
      64 |     });
      65 |   });
      66 |

      at Object.<anonymous> (test/integration/pages/about.spec.jsx:63:20)

  ● About Page › Speaking Content Section › should display the speaking content when the link is clicked after another click

    TypeError: Cannot read property 'history' of undefined

      10 |
      11 |   beforeEach(() => {
    > 12 |     about = mount(<About/>);
      13 |   });
      14 |
      15 |   describe('default state', () => {

      at new GatsbyLink (node_modules/gatsby-link/index.js:107:34)
      at constructClassInstance (node_modules/react-dom/cjs/react-dom.development.js:11333:18)
      at updateClassComponent (node_modules/react-dom/cjs/react-dom.development.js:13036:7)
      at beginWork (node_modules/react-dom/cjs/react-dom.development.js:13715:14)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:15741:12)
      at workLoop (node_modules/react-dom/cjs/react-dom.development.js:15780:24)
      at renderRoot (node_modules/react-dom/cjs/react-dom.development.js:15820:7)
      at performWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:16437:22)
      at performWork (node_modules/react-dom/cjs/react-dom.development.js:16358:7)
      at performSyncWork (node_modules/react-dom/cjs/react-dom.development.js:16330:3)
      at requestWork (node_modules/react-dom/cjs/react-dom.development.js:16230:5)
      at scheduleWork$1 (node_modules/react-dom/cjs/react-dom.development.js:16096:11)
      at scheduleRootUpdate (node_modules/react-dom/cjs/react-dom.development.js:16663:3)
      at updateContainerAtExpirationTime (node_modules/react-dom/cjs/react-dom.development.js:16690:10)
      at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:16717:10)
      at ReactRoot.Object.<anonymous>.ReactRoot.render (node_modules/react-dom/cjs/react-dom.development.js:17000:3)
      at node_modules/react-dom/cjs/react-dom.development.js:17140:14
      at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:16557:10)
      at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:17136:5)
      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:17195:12)
      at Object.render (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:218:50)
      at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:98:16)
      at mount (node_modules/enzyme/build/mount.js:19:10)
      at Object.<anonymous> (test/integration/pages/about.spec.jsx:12:13)

  ● About Page › Speaking Content Section › should display the speaking content when the link is clicked after another click

    TypeError: Cannot read property 'find' of undefined

      67 |   describe('Speaking Content Section', () => {
      68 |     it('should display the speaking content when the link is clicked after another click', () => {
    > 69 |       about.find('.link-writing').simulate('click');
      70 |       about.find('.link-speaking').simulate('click');
      71 |
      72 |       expect(about.find('.content-speaking').length).toBe(1);

      at Object.<anonymous> (test/integration/pages/about.spec.jsx:69:13)

  ● About Page › Writing Content Section › should display speaking content when the speaking link is clicked

    TypeError: Cannot read property 'history' of undefined

      10 |
      11 |   beforeEach(() => {
    > 12 |     about = mount(<About/>);
      13 |   });
      14 |
      15 |   describe('default state', () => {

      at new GatsbyLink (node_modules/gatsby-link/index.js:107:34)
      at constructClassInstance (node_modules/react-dom/cjs/react-dom.development.js:11333:18)
      at updateClassComponent (node_modules/react-dom/cjs/react-dom.development.js:13036:7)
      at beginWork (node_modules/react-dom/cjs/react-dom.development.js:13715:14)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:15741:12)
      at workLoop (node_modules/react-dom/cjs/react-dom.development.js:15780:24)
      at renderRoot (node_modules/react-dom/cjs/react-dom.development.js:15820:7)
      at performWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:16437:22)
      at performWork (node_modules/react-dom/cjs/react-dom.development.js:16358:7)
      at performSyncWork (node_modules/react-dom/cjs/react-dom.development.js:16330:3)
      at requestWork (node_modules/react-dom/cjs/react-dom.development.js:16230:5)
      at scheduleWork$1 (node_modules/react-dom/cjs/react-dom.development.js:16096:11)
      at scheduleRootUpdate (node_modules/react-dom/cjs/react-dom.development.js:16663:3)
      at updateContainerAtExpirationTime (node_modules/react-dom/cjs/react-dom.development.js:16690:10)
      at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:16717:10)
      at ReactRoot.Object.<anonymous>.ReactRoot.render (node_modules/react-dom/cjs/react-dom.development.js:17000:3)
      at node_modules/react-dom/cjs/react-dom.development.js:17140:14
      at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:16557:10)
      at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:17136:5)
      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:17195:12)
      at Object.render (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:218:50)
      at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:98:16)
      at mount (node_modules/enzyme/build/mount.js:19:10)
      at Object.<anonymous> (test/integration/pages/about.spec.jsx:12:13)

  ● About Page › Writing Content Section › should display speaking content when the speaking link is clicked

    TypeError: Cannot read property 'find' of undefined

      76 |   describe('Writing Content Section', () => {
      77 |     beforeEach(() => {
    > 78 |       about.find('.link-writing').simulate('click');
      79 |     });
      80 |
      81 |     it('should display speaking content when the speaking link is clicked', () => {

      at Object.<anonymous> (test/integration/pages/about.spec.jsx:78:13)

  ● About Page › Writing Content Section › should display speaking content when the speaking link is clicked

    TypeError: Cannot read property 'find' of undefined

      80 |
      81 |     it('should display speaking content when the speaking link is clicked', () => {
    > 82 |       about.find('.link-writing').simulate('click');
      83 |
      84 |       // test for a <CardList/> component here ideally
      85 |       expect(about.find('.content-writing').length).toBe(1);

      at Object.<anonymous> (test/integration/pages/about.spec.jsx:82:13)

  ● About Page › Writing Content Section › should have a call to action when displayed

    TypeError: Cannot read property 'history' of undefined

      10 |
      11 |   beforeEach(() => {
    > 12 |     about = mount(<About/>);
      13 |   });
      14 |
      15 |   describe('default state', () => {

      at new GatsbyLink (node_modules/gatsby-link/index.js:107:34)
      at constructClassInstance (node_modules/react-dom/cjs/react-dom.development.js:11333:18)
      at updateClassComponent (node_modules/react-dom/cjs/react-dom.development.js:13036:7)
      at beginWork (node_modules/react-dom/cjs/react-dom.development.js:13715:14)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:15741:12)
      at workLoop (node_modules/react-dom/cjs/react-dom.development.js:15780:24)
      at renderRoot (node_modules/react-dom/cjs/react-dom.development.js:15820:7)
      at performWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:16437:22)
      at performWork (node_modules/react-dom/cjs/react-dom.development.js:16358:7)
      at performSyncWork (node_modules/react-dom/cjs/react-dom.development.js:16330:3)
      at requestWork (node_modules/react-dom/cjs/react-dom.development.js:16230:5)
      at scheduleWork$1 (node_modules/react-dom/cjs/react-dom.development.js:16096:11)
      at scheduleRootUpdate (node_modules/react-dom/cjs/react-dom.development.js:16663:3)
      at updateContainerAtExpirationTime (node_modules/react-dom/cjs/react-dom.development.js:16690:10)
      at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:16717:10)
      at ReactRoot.Object.<anonymous>.ReactRoot.render (node_modules/react-dom/cjs/react-dom.development.js:17000:3)
      at node_modules/react-dom/cjs/react-dom.development.js:17140:14
      at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:16557:10)
      at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:17136:5)
      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:17195:12)
      at Object.render (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:218:50)
      at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:98:16)
      at mount (node_modules/enzyme/build/mount.js:19:10)
      at Object.<anonymous> (test/integration/pages/about.spec.jsx:12:13)

  ● About Page › Writing Content Section › should have a call to action when displayed

    TypeError: Cannot read property 'find' of undefined

      76 |   describe('Writing Content Section', () => {
      77 |     beforeEach(() => {
    > 78 |       about.find('.link-writing').simulate('click');
      79 |     });
      80 |
      81 |     it('should display speaking content when the speaking link is clicked', () => {

      at Object.<anonymous> (test/integration/pages/about.spec.jsx:78:13)

  ● About Page › Writing Content Section › should have a call to action when displayed

    TypeError: Cannot read property 'find' of undefined

      87 |
      88 |     it('should have a call to action when displayed', () => {
    > 89 |       about.find('.link-writing').simulate('click');
      90 |
      91 |       const cta = about.find('.cta');
      92 |

      at Object.<anonymous> (test/integration/pages/about.spec.jsx:89:13)

Test Suites: 3 failed, 2 skipped, 8 passed, 11 of 13 total
Tests:       18 failed, 5 skipped, 45 passed, 68 total
Snapshots:   0 total
Time:        5.198s
Ran all test suites.
error An unexpected error occurred: "Command failed.
Exit code: 1
Command: sh
Arguments: -c rimraf ./reports && jest --config ./jest.config.json --no-cache
Directory: /Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io
Output:
".
info If you think this is a bug, please open a bug report with the information provided in "/Users/owenbuckley/Workspace/thegreenhouse.io/repo/www.thegreenhouse.io/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

@thescientist13 thescientist13 mentioned this issue Jun 13, 2018
Merged
@Laura-O
Copy link

Laura-O commented Jun 18, 2018

I ran into the same issue when upgrading to v2. As mentioned above, I just added an empty JSON file:

touch node_modules/gatsby/cache-dir/pages.json
echo "{}" > node_modules/gatsby/cache-dir/pages.json

Of course, that's a quick and dirty fix, but Jest is happy now.

@Laura-O Laura-O mentioned this issue Jun 20, 2018
Closed
ascorbic added a commit to aerian-studios/aerian-site-rebuild that referenced this issue Jun 22, 2018
@ascorbic
Disable jest for gatsby components.
8b6652b 
See gatsbyjs/gatsby#5824
@m-allanson m-allanson moved this from To Do - v2 to In progress in Gatsby v2 Release Jun 26, 2018
@m-allanson m-allanson self-assigned this Jun 26, 2018
@melissamcewen melissamcewen mentioned this issue Jun 27, 2018
Closed
@kkemple
Copy link
Contributor

kkemple commented Jun 29, 2018 •
edited

Another option that may be a bit more resilient is to use Jest's moduleMapper config setting:

{
  "moduleNameMapper": {
    "node_modules/gatsby/cache-dir/pages.json$": "<rootDir>/__mocks__/pages.json",
  }
}

Then have an empty pages.json file in a mocks folder at root of project

@m-allanson m-allanson moved this from In progress to To Do - v2 in Gatsby v2 Release Jun 29, 2018
@thescientist13
Copy link
Contributor Author

nice! @kkemple ! Will definitely try this out

@thescientist13
Copy link
Contributor Author

thescientist13 commented Jun 30, 2018 •
edited

@kkemple
Thanks, this works nicely!

I am still getting results with a small subset of my tests as a reported in my comment here, so will likely open up a new issue for that once I've narrowed it down.

Thanks for all the help!

@thescientist13 thescientist13 mentioned this issue Jun 30, 2018
Closed
@thescientist13
Copy link
Contributor Author

thescientist13 commented Jun 30, 2018 •
edited

opened a new issue for the new errors I saw after adding pages.json
#6240

This can be closed if desired.

@kkemple
Copy link
Contributor

kkemple commented Jul 2, 2018

thanks @thescientist13 for opening a new issue to track that! I would prefer to leave this open as our fix is in user land and not core, thoughts @pieh and/or @m-allanson?

@jordyvanraaij
Copy link
Contributor

I'm experiencing a similar issue in a different file:

 FAIL  src/components/Header/index.test.js
  ● Test suite failed to run

    Cannot find module './pages.json' from 'public-page-renderer-dev.js'

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:210:17)
      at Object.<anonymous> (node_modules/gatsby/cache-dir/public-page-renderer-dev.js:12:37)

I tried the solution mentioned by @kkemple but that didn't work.

You guys have any idea how to fix this problem?

@ascorbic
Copy link
Contributor

ascorbic commented Jul 4, 2018

@jordyvanraaij This worked for me:

        "moduleNameMapper": {
            "^./pages.json$": "<rootDir>/__mocks__/pages.json"
        }

@jordyvanraaij
Copy link
Contributor

jordyvanraaij commented Jul 4, 2018 •
edited

@ascorbic doesn't work for me, I think this mapper will override other pages.json files as well

 FAIL  src/components/Header/index.test.js
  ● Test suite failed to run

    SyntaxError: Unexpected end of JSON input
        at JSON.parse (<anonymous>)

@ascorbic
Copy link
Contributor

ascorbic commented Jul 4, 2018

@jordyvanraaij That's probably because your mock pages.json is invalid. Mine is [] i.e. an empty array.

@jordyvanraaij
Copy link
Contributor

@ascorbic seems to do the trick (after installing babel-plugin-proposal-class-properties)!

However, now I've got errors with the Gatsby Link component just like @thescientist13:

 RUNS  src/components/Header/index.test.js
Test Suites: 2 passed, 2 of 3 total
Tests:       3 passed, 3 total
Snapshots:   3 passed, 3 total
Time:        14s  console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6309    The above error occurred in the <GatsbyLink> component:
        in GatsbyLink (created by Styled(GatsbyLink))
        in Styled(GatsbyLink) (created by Header)
        in header (created by styled.header)        in styled.header (created by Header)
        in Header

    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

  console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6309    The above error occurred in the <GatsbyLink> component:
        in GatsbyLink (created by Styled(GatsbyLink))
        in Styled(GatsbyLink) (created by Header)
        in header (created by styled.header)
 FAIL  src/components/Header/index.test.js (11.47s)
  ✕ Header is rendered with a relative position and black logo (319ms)
  ✕ Header is rendered with an absolute position and white logo (71ms)

  ● Header is rendered with a relative position and black logo

    TypeError: Cannot read property 'history' of undefined

       5 |
       6 | test('Header is rendered with a relative position and black logo', () => {
    >  7 |   const tree = renderer.create(<Header toggleNavigation={jest.fn()} />).toJSON()
         |                         ^
       8 |   expect(tree).toMatchSnapshot()
       9 | })
      10 |

      at new GatsbyLink (node_modules/gatsby/node_modules/gatsby-link/index.js:82:35)
      at constructClassInstance (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3530:18)
      at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5227:7)
      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5907:14)
      at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7949:12)
      at workLoop (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7980:24)
      at renderRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8020:7)
      at performWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8592:22)
      at performWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8527:7)
      at performSyncWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8499:3)
      at requestWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8399:5)
      at scheduleWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8274:11)
      at scheduleRootUpdate (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8739:3)
      at updateContainerAtExpirationTime (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8766:10)
      at updateContainer (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8777:10)
      at Object.create (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9260:5)
      at Object.<anonymous> (src/components/Header/index.test.js:7:25)

  ● Header is rendered with an absolute position and white logo

    TypeError: Cannot read property 'history' of undefined

      11 | test('Header is rendered with an absolute position and white logo', () => {
      12 |   const tree = renderer
    > 13 |     .create(<Header toggleNavigation={jest.fn()} absolute />)
         |      ^
      14 |     .toJSON()
      15 |   expect(tree).toMatchSnapshot()
      16 | })

      at new GatsbyLink (node_modules/gatsby/node_modules/gatsby-link/index.js:82:35)
      at constructClassInstance (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3530:18)
      at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5227:7)
      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5907:14)
      at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7949:12)
      at workLoop (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7980:24)
      at renderRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8020:7)
      at performWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8592:22)
      at performWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8527:7)
      at performSyncWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8499:3)
      at requestWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8399:5)
      at scheduleWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8274:11)
      at scheduleRootUpdate (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8739:3)
      at updateContainerAtExpirationTime (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8766:10)
      at updateContainer (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8777:10)
      at Object.create (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9260:5)
      at Object.<anonymous> (src/components/Header/index.test.js:13:6)

@ascorbic
Copy link
Contributor

ascorbic commented Jul 5, 2018 •
edited

@jordyvanraaij I solved that by wrapping it in a <MemoryRouter>. We could really do with some better docs for this.

@ascorbic ascorbic mentioned this issue Jul 5, 2018
Merged
@ascorbic
Copy link
Contributor

ascorbic commented Jul 5, 2018

I've gone ahead and created a PR (#6304) to add the empty pages.json as that seems to be the simplest fix.

pieh pushed a commit that referenced this issue Jul 6, 2018
@ascorbic @pieh
Add empty pages.json. (#5824) (#6304)
50cb0bb 
`<Link>` components currently break jest tests (#5824), as gatsby-browser-entry.js tries to import pages.json from cache-dir. This fails, because pages.json is created in .cache at build time. This PR adds an empty pages.json to cache-dir.
@jordyvanraaij
Copy link
Contributor

@ascorbic where does MemoryRouter come from? Is that included in gatsby? Do you wrap all your tests with the Link component with the MemoryRouter?

@ascorbic
Copy link
Contributor

ascorbic commented Jul 6, 2018

It's in react-router-dom. And yes, I wrap them all with it if they use Link.

@ascorbic
Copy link
Contributor

Should this be closed? I think #6304 fixes this. Incidentally, I've opened a PR (#6678) for some docs on setting up Jest.

@thescientist13
Copy link
Contributor Author

thescientist13 commented Jul 28, 2018 •
edited

I "think" this issue could probably be closed, but I personally couldn't verify it as upgrading to 2.0.0-rc18 and introduced more unit testing errors for me.

However, with the docs you've provided, I can plan this weekend to to upgrade to the latest version of Gatsby and validate this and #6240 and and report back / close.

Thanks for all your help so far!

@thescientist13
Copy link
Contributor Author

yup, this can be closed. Thanks all! 🌟

Gatsby v2 Release automation moved this from To Do - v2 blockers to Done Jul 28, 2018
@Danetag
Copy link

Danetag commented Jul 31, 2018 •
edited

Hello!

Not sure I should reopen this ticket, but I keep having issues with Jest + Gatsby v2 and I can't figure out why.

Description

I'm working on integrating simple Unit Tests, as I'd like to simply "test without crashing" a page.

SyntaxError: Unexpected identifier

From Unit Testing

 FAIL  src/pages/__tests__/index.test.js
  ● Test suite failed to run

    /Users/danetag/Sites/projects/google-aiy/node_modules/gatsby/cache-dir/gatsby-browser-entry.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from "react"
                                                                                                    ^^^^^

    SyntaxError: Unexpected identifier

      1 | import React from 'react';
      2 | import PropTypes from 'prop-types';
    > 3 | import { StaticQuery, graphql } from 'gatsby';
        | ^
      4 | import Head from 'components/head';
      5 | import Header from 'components/header';
      6 | import Transition from 'components/transition';

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
      at Object.<anonymous> (src/components/layout/layout.js:3:1)

babel-preset-env: `DEBUG` option

Using targets:
{}

Modules transform: commonjs

Using plugins:
  check-es2015-constants {}
  transform-es2015-arrow-functions {}
  transform-es2015-block-scoped-functions {}
  transform-es2015-block-scoping {}
  transform-es2015-classes {}
  transform-es2015-computed-properties {}
  transform-es2015-destructuring {}
  transform-es2015-duplicate-keys {}
  transform-es2015-for-of {}
  transform-es2015-function-name {}
  transform-es2015-literals {}
  transform-es2015-object-super {}
  transform-es2015-parameters {}
  transform-es2015-shorthand-properties {}
  transform-es2015-spread {}
  transform-es2015-sticky-regex {}
  transform-es2015-template-literals {}
  transform-es2015-typeof-symbol {}
  transform-es2015-unicode-regex {}
  transform-regenerator {}
  transform-exponentiation-operator {}
  transform-async-to-generator {}
  syntax-trailing-function-commas {}
Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.729s

package.json

"scripts": {
    "test": "node scripts/test.js"
  },
...
"jest": {
    "verbose": true,
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
    ],
    "testPathIgnorePatterns": [
      "/node_modules/",
      "/.cache/"
    ],
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$",
      "^.+\\.module\\.css$"
    ],
    "transform": {
      "^.+\\.(js|jsx|mjs)$": "<rootDir>/config/jest/transformer.js"
    },
    "moduleDirectories": [
      "node_modules",
      "<rootDir>/config/jest",
      "<rootDir>/src"
    ],
    "moduleNameMapper": {
      "^react-native$": "react-native-web",
      "^.+\\.module\\.css$": "identity-obj-proxy"
    },
    "testEnvironment": "node",
    "testURL": "http://localhost:9999",
    "setupFiles": [
      "<rootDir>/config/jest/setup-tests.js"
    ]
  }
...

scripts/test.js

'use strict';

require('babel-polyfill');

// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'test';
process.env.NODE_ENV = 'test';
process.env.PUBLIC_URL = '';

// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
  throw err;
});

// Ensure environment variables are read.
require('../config/env');

const jest = require('jest');
const argv = process.argv.slice(2);
argv.push('--no-cache');

jest.run(argv);

config/jest/transformer.js

module.exports = require('babel-jest').createTransformer({
  presets: ["react", ["env", {debug: true}]],
  "env": {
    "test": {
      "plugins": [
        "transform-es2015-modules-commonjs",
        "transform-object-rest-spread"
      ]
    }
  }
})

setup-tests.js

const Enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-16');

Enzyme.configure({ adapter: new Adapter() });

index.test.js

import React from 'react';
import { shallow } from 'enzyme';

import Index from 'pages/index';

describe('Index page', () => {

  it('should render without throwing an error', () => {
    shallow(
      <Index />
    );
  });
});

I'm not sure what the problem is, but it seems to come from node_modules/gatsby/cache-dir/gatsby-browser-entry.js

Thanks for your help!

@thescientist13
Copy link
Contributor Author

@Danetag
You might want to check out my comment here. Are you using the latest version of Gatsby? I got it all working with 2.0.0-beta.61. Make sure to review the testing guide!

@Danetag
Copy link

Danetag commented Jul 31, 2018 •
edited

@thescientist13 Thank you so much, the testing guide was in fact very helpful, as well as your comment!

I don't have any import issues now, I'm so close. This issue is related to graphql

 FAIL  src/pages/__tests__/index.test.js
  ● Test suite failed to run

    It appears like Gatsby is misconfigured. Gatsby related `graphql` calls are supposed to only be evaluated at compile time, and then compiled away,. Unfortunately, something went wrong and the query was left in the compiled code.

    .Unless your site has a complex or custom babel/Gatsby configuration this is likely a bug in Gatsby.

      15 | );
      16 | 
    > 17 | export const query = graphql`
         |                   ^
      18 |   query HomepageQuery {
      19 |     contentJson {
      20 |       title

      at graphql (node_modules/gatsby/cache-dir/gatsby-browser-entry.js:33:9)
      at Object.<anonymous> (src/pages/index.js:17:19)
      at Object.<anonymous> (src/pages/__tests__/index.test.js:9:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        3.324s

index.test.js

import React from 'react';
import { mount } from 'enzyme';

import { MemoryRouter } from 'react-router-dom';

import Index from 'pages/index';

describe('Index page', () => {

  let about;

  global.___loader = { // eslint-disable-line no-underscore-dangle
    enqueue: jest.fn()
  };

  beforeEach(() => {
    about = mount(
      <MemoryRouter>
        <Index/>
      </MemoryRouter>
    ).children();
  });

  it('default state', () => {

    it('should be defined', () => {
      expect(about).toBeDefined();
    });

  });
});

Index.js

import React from 'react';
import Layout from 'components/layout/layout';
import Box from 'components/box/box';
import Title from 'components/title/title';
import Gallery from 'components/gallery/gallery';
import { graphql } from 'gatsby';

export default ({ data }) => (
  <Layout>
    <Box>
      <Title tag="span">{data.contentJson.content}</Title>
    </Box>
    <Gallery items={data.contentJson.gallery} />
  </Layout>
);

export const query = graphql`
  query HomepageQuery {
    contentJson {
      title
      content
      gallery {
        title
        copy
        image {
          childImageSharp {
            fluid(maxHeight: 500, quality: 90) {
              ...GatsbyImageSharpFluid_withWebp
            }
          }
        }
      }
    }
  }
`;

Any idea? Thank you again!

@ascorbic
Copy link
Contributor

ascorbic commented Jul 31, 2018 •
edited

@Danetag I think you've identified a missing part from my testing guide! Jest doesn't run graphql queries, so you can't test them. In general it's a bad idea to test components that load data from elsewhere: you want to pass your own data in to test it. You have a couple of options. You may be able to use babel-plugin-remove-graphql-queries to remove the queries. Bear in mind you'd need to pass the data to <Index /> e.g. <Index data={myFixtureData} />.
Personally I don't test the pages with queries, but rather just test the components in them. Most of my pages are very simple, with just have a layout component (which handles navigation etc) wrapping a single presentational component which does that actual layout of the page. I can then test that presentational component, as well as putting it into a storybook. e.g. one of my page templates looks like this (TypeScript, but you get the idea):

import { graphql } from "gatsby";
import * as React from "react";
import Layout from "../components/Layout";
import { ProjectPage } from "../components/ProjectPage";
import { Project, ReactRouterLocation } from "../types/data";

interface Props {
    data: GraphData;
    location: ReactRouterLocation;
}

interface GraphData {
    projectsJson: Project;
}

export const ProjectTemplate: React.SFC<Props> = ({ data, location }) => (
    <Layout location={location} title={data.projectsJson.titleLineOne}>
        <ProjectPage project={data.projectsJson} />
    </Layout>
);

export const ProjectQuery = graphql`
    query project($id: String!) {
        projectsJson(id: { eq: $id }) {
            ...Project
        }
    }
`;
export default ProjectTemplate;

I then don't test that component, but test ProjectPage instead, with some fake data:

/// <reference types="@types/jest" />
import * as React from "react";
import * as renderer from "react-test-renderer";
import { MemoryRouter } from "react-router";
import { project } from "../../types/fixtures";
import { ProjectPage } from "./index";

describe("ProjectPage", () =>
    it("renders correctly", () => {
        const tree = renderer
            .create(
                <MemoryRouter>
                    <ProjectPage project={project} />
                </MemoryRouter>
            )
            .toJSON();
        expect(tree).toMatchSnapshot();
    }));

I think it might be worth me either adding to the test guide, or doing another page for it on testing graphql.

@Danetag
Copy link

Danetag commented Jul 31, 2018

Thank so much for your answer @ascorbic ! The goal here was to be able to test that all the pages basically runs with the current set of data, before deploying. I totally agree on the fact that it makes sense to test the modules specifically as well.

Any way that would come in mind to be able to run those graphql queries independently before, and then inject the data to each page?

Thank you again!

@ascorbic
Copy link
Contributor

@Danetag Yes, and I've just added instructions to #6678

@Danetag
Copy link

Danetag commented Jul 31, 2018

Thank you 🙏 I'm currently trying to get the data by spinning the graphql server before the test (if you know a better way than gatsby develop, let me know!), and use https://github.com/prismagraphql/graphql-request to get them.

Thank you again for your hard work!

@Danetag
Copy link

Danetag commented Jul 31, 2018

@ascorbic I figured out a way to only run the graphql server before the tests, but adding the babel-plugin-remove-graphql-queries plugin triggers an error

 FAIL  src/pages/__tests__/index.test.js
  ● Test suite failed to run

    Unexpected return value from visitor method function (path) {
              return fn.call(state, path, state);
            }

      at NodePath._call (node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:60:13)
      at NodePath.call (node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:40:17)
      at NodePath.visit (node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:88:12)
      at TraversalContext.visitQueue (node_modules/@babel/core/node_modules/@babel/traverse/lib/context.js:118:16)
      at TraversalContext.visitSingle (node_modules/@babel/core/node_modules/@babel/traverse/lib/context.js:90:19)
      at TraversalContext.visit (node_modules/@babel/core/node_modules/@babel/traverse/lib/context.js:146:19)
      at Function.traverse.node (node_modules/@babel/core/node_modules/@babel/traverse/lib/index.js:94:17)
      at NodePath.visit (node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:95:18)
      at TraversalContext.visitQueue (node_modules/@babel/core/node_modules/@babel/traverse/lib/context.js:118:16)
      at TraversalContext.visitMultiple (node_modules/@babel/core/node_modules/@babel/traverse/lib/context.js:85:17)
      at TraversalContext.visit (node_modules/@babel/core/node_modules/@babel/traverse/lib/context.js:144:19)
      at Function.traverse.node (node_modules/@babel/core/node_modules/@babel/traverse/lib/index.js:94:17)
      at NodePath.visit (node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:95:18)
      at TraversalContext.visitQueue (node_modules/@babel/core/node_modules/@babel/traverse/lib/context.js:118:16)
      at TraversalContext.visitSingle (node_modules/@babel/core/node_modules/@babel/traverse/lib/context.js:90:19)
      at TraversalContext.visit (node_modules/@babel/core/node_modules/@babel/traverse/lib/context.js:146:19)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        2.609s

transformer.js

module.exports = require('babel-jest').createTransformer({
  presets: ["@babel/react", "@babel/env"],
  plugins: [
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-class-properties",
    "remove-graphql-queries",
  ],
})

Any thoughts? SO CLOSE 🏆

@mrdbeck
Copy link

mrdbeck commented Aug 1, 2018

Also in the same situation as @Danetag

@Danetag
Copy link

Danetag commented Aug 1, 2018

@mrdbeck Actually using "babel-plugin-remove-graphql-queries": "^2.0.2-beta.8" fixed it for me!

Thanks team 👊

PS: I did find a way to run the graphql server locally to be able to request it during the test...
Have to say, it's totally hacky, but it was fun to do!

@mrdbeck
Copy link

mrdbeck commented Aug 2, 2018

@Danetag amazing news, this fixed it for me too. Cheers

@azamatsmith
Copy link

azamatsmith commented Oct 19, 2018 •
edited

Adding babel-plugin-remove-graphql-queries helped me get Storybook working when I had this error 🙌

  defaultConfig.module.rules[0].use[0].options.plugins = [
    require.resolve('@babel/plugin-proposal-class-properties'),
    require.resolve('babel-plugin-remove-graphql-queries'),
  ];

@savindu-pasintha
Copy link

I fixed my issue using this.

  1. set +e : This command places it at the top of your shell script. It disables error output (exit code 0)."
  2. In your package.json script section, you can update it as follows for the yarn test command: { "test": "jest -u --info" }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@m-allanson m-allanson

Labels
help wanted Issue with a clear description that the community can help with. type: bug An issue or pull request relating to a bug in Gatsby
Projects
No open projects
Gatsby v2 Release
  
Done
Milestone
No milestone
Development

No branches or pull requests