Testing Hooks with shallow: Invariant Violation
See original GitHub issueCurrent behavior
When testing component which contains newly released React Hooks using shallow
, it crashes:
Invariant Violation: Hooks can only be called inside the body of a function component.
Everything works fine at run time or when testing with render
:
My test component:
import * as React from 'react';
function Test() {
const [myState, setMyState] = React.useState('Initial state');
const changeState = () => setMyState('State updated');
return (
<div>
{myState}
<button onClick={changeState}>Change</button>
</div>
);
}
export default Test;
My test file:
import { shallow } from 'enzyme';
import * as React from 'react';
import Test from './Test';
it('renders without crashing', () => {
const comp = shallow(<Test />);
expect(comp.find('Test')).toMatchSnapshot();
});
Error stack trace:
Invariant Violation: Hooks can only be called inside the body of a function component.
at invariant (node_modules/react/cjs/react.development.js:125:15)
at resolveDispatcher (node_modules/react/cjs/react.development.js:1450:28)
at Object.useState (node_modules/react/cjs/react.development.js:1473:20)
at Test (src/Test.tsx:4:11)
at node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:440:38
at ReactShallowRenderer.render (node_modules/react-test-renderer/cjs/react-test-renderer-shallow.development.js:412:39)
at node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:444:37
at withSetStateAllowed (node_modules/enzyme-adapter-utils/build/Utils.js:137:16)
at Object.render (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:443:70)
at new ShallowWrapper (node_modules/enzyme/build/ShallowWrapper.js:206:22)
at Object.shallow (node_modules/enzyme/build/shallow.js:21:10)
at Object.<anonymous> (src/Test.test.tsx:6:18)
at new Promise (<anonymous>)
at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
at process._tickCallback (internal/process/next_tick.js:68:7)
Expected behavior
Tests should run
Your environment
Fresh create-react-app-typescript install with react 16.7.0-alpha-0
API
- shallow
- mount
- render
Version
library | version |
---|---|
enzyme | 3.8.0 |
react | 16.7.0-alpha.0 |
react-dom | 16.7.0-alpha.0 |
react-test-renderer | |
adapter (below) |
Adapter
- enzyme-adapter-react-16
- enzyme-adapter-react-16.3
- enzyme-adapter-react-16.2
- enzyme-adapter-react-16.1
- enzyme-adapter-react-15
- enzyme-adapter-react-15.4
- enzyme-adapter-react-14
- enzyme-adapter-react-13
- enzyme-adapter-react-helper
- others ( )
Issue Analytics
- State:
- Created 5 years ago
- Reactions:39
- Comments:79 (31 by maintainers)
Top Results From Across the Web
Shallow Testing Hooks with Enzyme - Carbon Five Blog
The trick to shallow testing hooks like useEffect is to use spies. The examples here are specifically for Jest, but they should work...
Read more >How to test React Hooks - LogRocket Blog
The goal of this article is to provide a practical guide on testing React Hooks using tools such as React Testing Library, Jest,...
Read more >Fix Invalid Hook Call Warning in React Tests - Sinistra
Fix Invalid Hook Call Warning in React Tests ... "Invariant Violation: Hooks can only be called inside the body of a function component....
Read more >React / Enzyme: Invariant Violation error when running Jest ...
I have a React / Redux component and am trying to write a basic test but get the following error: Invariant Violation: ReactShallowRenderer...
Read more >React Hooks Unit Testing using Shallow - Medium
React Hooks Unit Testing using Shallow · The shallow method allows us to render a single component that we are testing. · It...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I had the same issue and the reason was multiple versions of
react-test-renderer
For some reason,
enzyme-adapter-react-16
had an oldreact-test-renderer@16.2.0
as its own dependency. I had to remove and add them back:Hooks are not yet in a non-alpha version, and are definitely not yet supported in enzyme.
I’d suggest waiting to use them until they’re not experimental.