question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cannot shallow render a component containing hooks

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:21
  • Comments:16 (5 by maintainers)

github_iconTop GitHub Comments

29reactions
gaearoncommented, Jan 18, 2019
16reactions
gaearoncommented, Nov 5, 2018

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Enzyme & React router: How to shallow render a component ...
What I've been trying is to render a component with shallow , which is provided by enzyme . The component is using useHistory...
Read more >
Shallow Testing Hooks with Enzyme - Carbon Five Blog
The problem is Hooks are shiny and new, and React and Enzyme are still catching up on the testing front. The Enzyme devs...
Read more >
React Hooks Unit Testing using Shallow - Medium
The shallow method allows us to render a single component that we are testing. It doesn't render the child component. Less props are...
Read more >
Shallow Renderer - React
When writing unit tests for React, shallow rendering can be helpful. Shallow rendering lets you render a component “one level deep” and assert...
Read more >
Guide of Testing React Components with Hooks & Mocks
Shallow rendering is used when you need to test your component as an independent unit. It does not render child elements that your...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found