Cannot shallow render a component containing hooks
See original GitHub issueDo 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
Issue Analytics
- State:
- Created 5 years ago
- Reactions:21
- Comments:16 (5 by maintainers)
Fixed by https://github.com/facebook/react/pull/14567
It’s definitely a prerequisite to considering Hooks stable. Can’t give you any dates though.