title: "Navbar refers to a value, but is being used as a type here" when trying to render a shallow copy of my component when testing
body: <p>I am trying to write a test to my React component, using TypeScript, Jest as my test runner and Enzyme for testing my React components. Whenever I pass my component into the <code>shallow</code> Enzyme function, I get the ts error "'Navbar' refers to a value, but is being used as a type here.", and underneath I get eslint error "Parsing error: '>' expected". </p>
  
  <p>I tried it on some other components, all have the same error when being passed into the <code>shallow</code> function as arguments. I suspect it may have something to do with my TS configurations, but for the life of me I cannot seem to be finding a solution.</p>
  
  <p>Here's the code for Navbar.tsx:</p>
  
  <pre><code>import React from 'react';
  import { shallow } from 'enzyme';
  import Navbar from './Navbar';
  
  describe('Navbar component', () =&gt; {
      let component;
      beforeEach(() =&gt; {
          component = shallow(&lt;Navbar /&gt;); // Error being desplayed here
      });
  
      it('should render without errors', () =&gt; {
          expect(component).toMatchInlineSnapshot();
          expect(component.length).toBe(1);
          expect(component).toBeTruthy();
      });
  });
  </code></pre>
  
  <p>Also posting my config files:</p>
  
  <p>tsconfig:</p>
  
  <pre><code>{
    "compilerOptions": {
      "target": "es5",
      "lib": [
        "dom",
        "dom.iterable",
        "esnext"
      ],
      "allowJs": true,
      "skipLibCheck": true,
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "strict": true,
      "forceConsistentCasingInFileNames": true,
      "module": "esnext",
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "isolatedModules": true,
      "noEmit": true,
      "jsx": "react"
    },
    "parserOptions": {
      "ecmaVersion": 6,
      "sourceType": "module",
      "ecmaFeatures": {
        "jsx": true
      }
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules", "**/*.spec.ts", "**/*.test.ts"]
  }
  </code></pre>
  
  <p>jest.config.ts:</p>
  
  <pre><code>module.exports = {
      roots: ['&lt;rootDir&gt;/src'],
      transform: {
          '^.+\\.tsx?$': 'ts-jest',
      },
      testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
      moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
      snapshotSerializers: ['enzyme-to-json/serializer'],
      setupTestFrameworkScriptFile: '&lt;rootDir&gt;/src/setupEnzyme.ts',
  };
  </code></pre>
  
  <p>Enzyme setup:</p>
  
  <pre><code>import { configure } from 'enzyme';
  import Adapter from 'enzyme-adapter-react-16';
  import 'jest-enzyme';
  
  configure({ adapter: new Adapter(), disableLifecycleMethods: 
  </code></pre>