title: React Typescript and Jest
body: <p>I'm trying to set up Jest in an React app using Typescript.</p>
  
  <p>My set up is like this</p>
  
  <p>My package.json</p>
  
  <pre><code>{
    "name": "react-tdd-ts",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
      "@types/jest": "24.0.23",
      "@types/node": "12.12.9",
      "@types/react": "16.9.11",
      "@types/react-dom": "16.9.4",
      "enzyme": "^3.10.0",
      "react": "^16.12.0",
      "react-dom": "^16.12.0",
      "react-scripts": "3.2.0",
      "typescript": "3.7.2"
    },
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
    },
    "eslintConfig": {
      "extends": "react-app"
    },
    "browserslist": {
      "production": [
        "&gt;0.2%",
        "not dead",
        "not op_mini all"
      ],
      "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
      ]
    },
    "devDependencies": {
      "@types/enzyme": "^3.10.3",
      "@types/enzyme-adapter-react-16": "^1.0.5",
      "@types/react-test-renderer": "^16.9.1",
      "enzyme-adapter-react-16": "^1.15.1",
      "react-test-renderer": "^16.12.0"
    }
  }
  </code></pre>
  
  <p>My App.tsx</p>
  
  <pre><code>import React from "react";
  import "./App.css";
  
  import Footer from "./components/Footer";
  
  const App: React.FC = () =&gt; {
    return (
      &lt;div className="App"&gt;
        &lt;Footer /&gt;
      &lt;/div&gt;
    );
  };
  
  export default App;
  </code></pre>
  
  <p>My Footer.tsx</p>
  
  <pre><code>import React from "react";
  
  const Footer: React.FC = () =&gt; {
    return (
      &lt;div&gt;
        &lt;hr /&gt;
        &lt;span&gt;Text here&lt;/span&gt;
      &lt;/div&gt;
    );
  };
  
  export default Footer;  
  </code></pre>
  
  <p>My Footer.test.tsx</p>
  
  <pre><code>import React from "react";
  import { shallow } from "enzyme";
  import Footer from "./Footer";
  
  it("should render text", () =&gt; {
    const wrapper = shallow(&lt;Footer /&gt;);
    const span = wrapper.find("span");
    const result = span.text();
  
    expect(result).toBe("Text here");
  });
  </code></pre>
  
  <p>MY setupTest.tsx</p>
  
  <pre><code>import { configure } from "enzyme";
  import Adapter from "enzyme-adapter-react-16";
  configure({ adapter: new Adapter() });  
  </code></pre>
  
  <p>In the terminal I'm getting the following error</p>
  
  <pre><code> PASS  src/App.test.tsx
   FAIL  src/components/Footer.test.tsx
    ● should render text
  
  
        Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none.
        To configure an adapter, you should call `Enzyme.configure({ adapter: new Adapter() })`
        before using any of Enzyme's top level APIs, where `Adapter` is the adapter
        corresponding to the library currently being tested. For example:
  
        import Adapter from 'enzyme-adapter-react-15';
  
        To find out more about this, see http://airbnb.io/enzyme/docs/installation/index.html
  
    4 | 
    5 | it("should render text", () =&gt; {
  &gt; 6 |   const wrapper = shallow(&lt;Footer /&gt;);
      |                   ^
    7 |   const span = wrapper.find("span");
    8 |   const result = span.text();
    9 | 
  
  
    at validateAdapter (node_modules/enzyme/src/validateAdapter.js:5:11)
    at getAdapter (node_modules/enzyme/src/getAdapter.js:10:3)
    at makeShallowOptions (node_modules/enzyme/src/ShallowWrapper.js:345:19)
    at new ShallowWrapper (node_modules/enzyme/src/ShallowWrapper.js:379:21)
    at shallow (node_modules/enzyme/src/shallow.js:10:10)
    at Object.&lt;anonymous&gt;.it (src/components/Footer.test.tsx:6:19)    
  </code></pre>
  
  <p>Sorry I don't have a working demo but can anyone see what I'm doing wrong.
  Is there a different way to set up enzyme and Jest when using typescript    </p>