[gatsby-link] Make it usable outside Gatsby

[rstacruz]

Description

If you try to use <Link /> outside of Gatsby (eg, when running tests), it fails because the component tree doesn't have the context injected by Gatsby:

    TypeError: Cannot read property 'history' of undefined

      at new GatsbyLink (node_modules/gatsby-link/index.js:107:34)
      at constructClassInstance (node_modules/react-dom/cjs/react-dom.development.js:6355:20)
      at updateClassComponent (node_modules/react-dom/cjs/react-dom.development.js:7839:9)

It'd be nice if <Link /> will fallback to a common <a href=...> in the absence of this context.

Example

If you have a component (eg, MyMenu.js) that uses gatsby-link:

import * as React from 'react'
import Link from 'gatsby-link'

export const MyMenu = () => (
  <nav>
    <Link to='/'>Home</Link>
  </nav>
)

And have a test file that renders with it (using Jest syntax here, but it doesn't matter what test harness you use):

import * as React from 'react'
import { render } from 'react-dom'
import MyMenu from '../MyMenu'

it('works', () => {
  const div = document.createElement('div')
  render(<MyMenu />, div)
})

You'll get ⚠️ TypeError: Cannot read property 'history' of undefined.

Environment

• Gatsby version (npm list gatsby): [email protected]
• gatsby-cli version (gatsby --version): n/a
• Node.js version: 8.10.0
• Operating System: Linux

[KyleAMathews]

Hmmm yeah. What do people normally do when testing components that rely on context?

[phs1919]

I had the same issue when testing Gatsby Link. This comment was useful to solve it. Hope this helps you :)

[rstacruz]

Testing things with context? It really depends. I typically do one of two things:

1. Create a context-less version (eg, <MediaPlayerView>) that's used by a "connector" component (eg, <MediaPlayer>) which will convert context stuff into props. I can now just test the <MediaPlayerView> component.

2. Create a mock context.

Anyway, I'd really love for this for react-storybook too, so I can make storybook pages out of my components that use gatsby-link!

[KyleAMathews]

Perhaps it'd be best to just create a context-less version? Can react-storybook do aliases? E.g. in there just create a component that wraps <a>. gatsby-link just has a bunch of logic necessary to make Gatsby page loading work, etc.

[varya]

I have the same problem. Is it possible to provide a property which would render Link but not access context things? This way it would be visible how it looks. This is what testing cares about.

[gatsbot]

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!

[gatsbot]

This issue is being closed due to inactivity. Is this a mistake? Please re-open this issue or create a new issue.