title: How to test with jest and typescript with types a basic react function component
body: <p>This is a bit shocking, but I've been long long time trying to find a simple example on how to test a silly react component using jest and typescript, and I am unable to succeed.
  I've had a look at:
  <a href="https://basarat.gitbooks.io/typescript/content/docs/testing/jest.html" rel="nofollow noreferrer">https://basarat.gitbooks.io/typescript/content/docs/testing/jest.html</a>
  <a href="https://stackoverflow.com/questions/45047316/how-to-use-react-test-renderer-shallow-with-typescript">How to use react-test-renderer/shallow with typescript?</a>
  <a href="https://stackoverflow.com/questions/40504222/how-to-see-what-the-rendered-react-component-looks-like-in-the-jest-unit-test">How to see what the rendered React component looks like in the Jest unit test?</a></p>
  
  <p>Nothing works. Most of the times I get </p>
  
  <pre><code>Test suite failed to run
  'App' refers to a value, but is being used as a type here.
  </code></pre>
  
  <p>I'm new to react and jest. I've tried react-test-renderer and enzyme. At this stage I don't mind either, the most agnostic possible would be great.</p>
  
  <p>What I have:
  This is my package.json</p>
  
  <pre><code>{
      "name": "web",
      "version": "1.0.0",
      "description": "mySample",
      "main": "index.js",
      "scripts": {
          "build-dev": "webpack --watch",
          "build": "webpack",
          "start-dev": "nodemon build/server.js",
          "start": "node build/server.js",
          "test": "jest"
      },
      "dependencies": {
          "express": "^4.17.1",
          "react": "^16.8.6",
          "react-dom": "^16.8.6"
      },
      "devDependencies": {
          "@types/enzyme": "^3.10.3",
          "@types/express": "^4.17.0",
          "@types/jest": "^24.0.16",
          "@types/node": "^12.6.9",
          "@types/react": "^16.8.24",
          "@types/react-dom": "^16.8.5",
          "enzyme": "^3.10.0",
          "jest": "^24.8.0",
          "nodemon": "^1.19.1",
          "ts-jest": "^24.0.2",
          "ts-loader": "^6.0.4",
          "typescript": "^3.5.3",
          "webpack": "^4.39.1",
          "webpack-cli": "^3.3.6",
          "webpack-node-externals": "^1.7.2"
      }
  }
  
  </code></pre>
  
  <p>as you can see, I'd like to have strongly typed tests with typescript, and that's why I need enzyme types.</p>
  
  <p><strong>I have a silly react component</strong> <code>App.tsx</code></p>
  
  <pre><code>import * as React from "react";
  
  interface WelcomeProps {
      name: string;
  }
  
  const App: React.FC&lt;WelcomeProps&gt; = ({ name }) =&gt; {
      return &lt;h1&gt;Hello, {name}&lt;/h1&gt;;
  };
  
  export default App;
  
  </code></pre>
  
  <p>And I want to have a test file <code>App.test.ts</code>
  where I simply test that given the <code>&lt;App name="whatever" /&gt;</code> renders, the DOM should have <code>&lt;h1&gt;Hello, whatever&lt;/h1&gt;</code></p>
  
  <p>My attempt was:</p>
  
  <pre><code>import * as React from "react";
  import App from "./App";
  import { shallow } from "enzyme";
  
  describe("App component", () =&gt; {
      it("returns the name passed as props", () =&gt; {
          const app = shallow(&lt;App name="test" /&gt;);
          expect(app).toMatchSnapshot();
      });
  });
  
  </code></pre>
  
  <p>and it fails with the above error, plus the VS Code displays error on the shallow argument as if it didn't understand JSX.</p>
  
  <p>In case it's needed my <code>jest.config.js</code> is:</p>
  
  <pre><code>module.exports = {
      roots: ["&lt;rootDir&gt;/src"],
      transform: {
          "^.+\\.tsx?$": "ts-jest"
      }
  };
  </code></pre>
  
  <p>It can't get simpler than this, yet I'm failing!</p>
  
  <p>PS: The vast majority of the articles I find don't use typescript and type definitions, but this is something I want.</p>