title: Simpliest component with Hooks fails Jest test with error "Invariant Violation: Hooks can only be called inside the body of a function component."
body: <p>I am trying to write tests for my application using Jest, but I am facing the same issue for every functional component that uses React Hooks.</p>
  
  <p>This is my <code>package.json</code> file, but I can't see what might be wrong with it.</p>
  
  <pre><code>{
    "private": true,
    "main": "node_modules/expo/AppEntry.js",
    "scripts": {
      "start": "expo start",
      "android": "expo start --android",
      "ios": "expo start --ios",
      "eject": "expo eject",
      "lint": "eslint src/**/*.js",
      "test": "jest"
    },
    "jest": {
      "preset": "jest-expo",
      "automock": false,
      "setupFiles": [
        "./setupJest.js"
      ]
    },
    "dependencies": {
      "expo": "^33.0.0",
      "expo-constants": "^5.0.1",
      "expo-font": "^5.0.1",
      "expo-linear-gradient": "^5.0.1",
      "expo-secure-store": "^5.0.1",
      "expo-sms": "^5.0.1",
      "jwt-decode": "^2.2.0",
      "moment": "^2.24.0",
      "npm": "^6.10.2",
      "react": "16.8.3",
      "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
      "react-native-calendars": "^1.185.0",
      "react-native-global-props": "^1.1.5",
      "react-native-maps": "^0.24.2",
      "react-native-modal": "^9.0.0",
      "react-native-snap-carousel": "3.7.5",
      "react-native-spacer": "^1.5.0",
      "react-navigation": "^3.11.0",
      "react-redux": "^7.1.0",
      "react-test-renderer": "^16.7.0",
      "redux": "^4.0.4",
      "styled-components": "^4.2.0",
      "util": "^0.11.1"
    },
    "devDependencies": {
      "babel-eslint": "^10.0.1",
      "babel-preset-expo": "^5.0.0",
      "eslint": "^5.12.1",
      "eslint-config-airbnb": "^17.1.0",
      "eslint-plugin-import": "^2.15.0",
      "eslint-plugin-jsx-a11y": "^6.2.0",
      "eslint-plugin-react": "^7.12.4",
      "jest-expo": "^33.0.2",
      "jest-fetch-mock": "^2.1.2"
    }
  }
  </code></pre>
  
  <pre><code>import React, { useState } from 'react';
  import { View, TouchableOpacity } from 'react-native';
  import AppText from '../AppText/AppText';
  
  const CommonErrorModal = (props) =&gt; {
    const {
      errorDetails
    } = props;
    const [showDetails, setShowDetails] = useState(false);
  
    return (
      &lt;View&gt;
        {
          showDetails
            ? &lt;AppText&gt;{errorDetails}&lt;/AppText&gt;
            : &lt;TouchableOpacity onPress={() =&gt; setShowDetails(true)} /&gt;
        }
      &lt;/View&gt;
    );
  };
  
  export default CommonErrorModal;
  </code></pre>
  
  <p>and here is the test:</p>
  
  <pre><code>test('renders correctly CommonErrorModal', () =&gt; {
    const tree = renderer.create(&lt;CommonErrorModal /&gt;).toJSON();
    expect(tree).toMatchSnapshot();
  });
  </code></pre>
  
  <p>Could anybody provide my info what should I add to my project to make this work?</p>
  
  <p>EDIT</p>
  
  <p>Full error from console:</p>
  
  <pre><code>  console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8218
      The above error occurred in the &lt;CommonErrorModal&gt; component:
          in CommonErrorModal
  
      Consider adding an error boundary to your tree to customize error handling behavior.
      Visit fb.me/react-error-boundaries to learn more about error boundaries.
  
   FAIL  src/components/common/__tests__/Common-components-test.js
    ✓ renders correctly ActionBarButton (116ms)
    ✓ renders correctly AppText (1ms)
    ✓ renders correctly Button (1ms)
    ✓ renders correctly CategorySelector (57ms)
    ✕ renders correctly CommonErrorModal (9ms)
    ✓ renders correctly ConfirmModal (10ms)
    ✓ renders correctly DropdownSelect (2ms)
    ✓ renders correctly FontIcon
    ✓ renders correctly HorizontalSeparator (1ms)
    ✓ renders correctly InfoModal (2ms)
    ✓ renders correctly Input (16ms)
    ✓ renders correctly LoadingIndicator (4ms)
    ✓ renders correctly LocationPicker (9ms)
    ✓ renders correctly MapPicker (3ms)
    ✓ renders correctly SectionHeader (2ms)
    ✓ renders correctly SquareTile
    ✓ renders correctly StudentsPicker (3ms)
    ✓ renders correctly TextInCircle (1ms)
    ✓ renders correctly TimePicker (56ms)
  
    ● renders correctly CommonErrorModal
  
      Invariant Violation: Hooks can only be called inside the body of a function component. (fb.me/react-invalid-hook-call)
  
         7 |     errorDetails
         8 |   } = props;
      &gt;  9 |   const [showDetails, setShowDetails] = useState(false);
           |                                         ^
        10 | 
        11 |   return (
        12 |     &lt;View&gt;
  
        at invariant (node_modules/react/cjs/react.development.js:88:15)
        at resolveDispatcher (node_modules/react/cjs/react.development.js:1436:28)
        at useState (node_modules/react/cjs/react.development.js:1461:20)
        at CommonErrorModal (src/components/common/CommonErrorModal/CommonErrorModal.js:9:41)
        at mountIndeterminateComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7016:13)
        at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7521:16)
        at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10358:12)
        at workLoop (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10390:24)
        at renderRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10476:7)
        at performWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11342:7)
  </code></pre>