React: Cannot shallow render a component containing hooks

[ChibiBlasphem]

Do you want to request a feature or report a bug?
A bug

What is the current behavior?
An error is thrown:
Invariant Violation: Hooks can only be called inside the body of a function component.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:
App.js

import React, { useState } from 'react'

const App = () => {
  const [name, setName] = useState('Chris')
  return (
    <div>Hello { name }</div>
  )
}

export default App

Test.js

import React from 'react'
import ShallowRenderer from 'react-test-renderer/shallow'
import App from './components/App'

const renderer = new ShallowRenderer()
renderer.render(<App />)

What is the expected behavior?
We should be able to shallow render a component with hooks like any other component (Enzyme too)

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
16.7.0-alpha.0

[gaearon]

Yeah. We haven't added support to shallow renderer yet.

[ChibiBlasphem]

Do you know when it will be scheduled ? I don't like really much to full mount my application.

[gaearon]

It's definitely a prerequisite to considering Hooks stable. Can't give you any dates though.

[ChibiBlasphem]

Ok, that's good to know. Thank you for the answers =)

[anaisbetts]

I figured this out as well, https://codesandbox.io/s/82qv0m8l98 is a super small repro when we get around to testing this

[jamesseanwright]

For now, I'm working around this by injecting the hooks I require into my components, as per this example; this allows me to use mocks in my tests, upon which I set expectations.

It's important to highlight that this is a temporary workaround; it would be far better to assert the props resulting from a hook-derivative re-render, as they are an implementation detail. This probably also demonstrates why they shouldn't be used in the wild just yet! 😁

[juniusfree]

+1

[gaearon]

Fixed by https://github.com/facebook/react/pull/14567

[jamesvsshark]

Thanks for the fix! When will this be released into alpha? Sorry for the noob question.

[jamesseanwright]

@jamesvsshark Within a couple of weeks, it would seem!

[hynese]

Eagerly awaiting this being released to alpha...

[Kyle-Mendes]

I'm still getting this issue in React 16.8 release. Is there a corresponding jest upgrade that needs to happen to allow shallow testing on hooks?

[gaearon]

File a new issue with a reproducing case. Shallow rendering Hooks should work.

You’re sure you didn’t forget to update test renderer?

[Kyle-Mendes]

I'll double check that, thanks @gaearon.

If it is still not working, I'll make a new issue :)

[LukasBombach]

Where is the new issue? I too have that problem. I got this _string_:

    const React = require('react');
      module.exports = function ExpectedClass () {
          const [greeting, setgreeting] = React.useState("World");
          return React.createElement("div", {  }, [`Hello ${greeting}`]);
        }

which I import via require-from-string. This has never been an issue with React classes so I would not assume it's that library's fault. I just switched from class syntax to this syntax and I get that Invariant Error.

[gaearon]

@LukasBombach What "this" problem? You didn't provide any details about the error you're seeing. :-)

I'll lock this issue because it seems to attract low-quality reports. If you experience a problem with shallow rendering Hooks, please file a new issue with the exact error you were seeing and a reproducing project. We'd be happy to investigate it then. Thank you!

The originally reported issue was fixed in 16.8.0.