title: Jest test on typescript file syntax error: "interface is a reserved word in strict mode"
body: <p><em>My Branch:</em> <a href="https://github.com/Futuratum/moonholdings.io/tree/JestTests" rel="noreferrer">https://github.com/Futuratum/moonholdings.io/tree/JestTests</a></p>
  
  <p><em>Current PR:</em> <a href="https://github.com/Futuratum/moonholdings.io/pull/29" rel="noreferrer">https://github.com/Futuratum/moonholdings.io/pull/29</a></p>
  
  <p><a href="https://i.stack.imgur.com/XcsHF.png" rel="noreferrer"><img src="https://i.stack.imgur.com/XcsHF.png" alt="enter image description here"></a></p>
  
  <p><strong>My Astronaut.tsx component</strong></p>
  
  <pre><code>import React from 'react';
  
  import { moonHoldings } from '../../shared/models';
  import { astronaut } from '../../styles';
  
  const { AstronautContainer, Heading } = astronaut;
  
  interface LogoCheck {
    showLogo: boolean;
  }
  
  export default (showLogo: LogoCheck) =&gt;  (
    &lt;AstronautContainer&gt;
      { showLogo.showLogo === true ? &lt;Heading&gt;{moonHoldings}&lt;/Heading&gt; : null }
      &lt;img src="static/astronaut.png" alt="astronaut" /&gt;
    &lt;/AstronautContainer&gt;
  );
  </code></pre>
  
  <p><strong>The simple test:</strong></p>
  
  <pre><code>import React from 'react';
  import { shallow } from 'enzyme';
  import toJson from 'enzyme-to-json';
  
  import Astronaut from '../components/Astronaut/Astronaut.tsx';
  
  describe('&lt;Astronaut /&gt; component', () =&gt; {
    console.log('Astronaut', Astronaut);
    describe('when rendering', () =&gt; {
      const wrapper = shallow(&lt;Astronaut showLogo={true} /&gt;);
  
      it('should render a component matching the snapshot', () =&gt; {
        const tree = toJson(wrapper);
        expect(tree).toMatchSnapshot();
        expect(wrapper).toHaveLength(1);
      });
    });
  });
  </code></pre>
  
  <blockquote>
    <p>SyntaxError: /Users/leongaban/projects/Futuratum/moonholdings.io/components/Astronaut/Astronaut.tsx: interfaceis a reserved word in strict mode (8:0)</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/lgpCT.png" rel="noreferrer"><img src="https://i.stack.imgur.com/lgpCT.png" alt="enter image description here"></a></p>
  
  <p>I tried changing strict to false in my tsconfig's <code>compilerOptions</code> but that did not help.</p>
  
  <p>Anyone else run into this with Jest testing and Typescript?</p>
  
  <hr>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
    "name": "moonholdings.io",
    "version": "2.0.0",
    "description": "Moonholdings.io",
    "main": "index.ts",
    "scripts": {
      "dev": "next -p 7777",
      "build": "next build",
      "start": "next start -p 8000",
      "test": "NODE_ENV=test jest --watch",
      "test-win": "SET NODE_ENV=test&amp;&amp; jest --watch",
      "heroku-postbuild": "next build"
    },
    "author": "Futuratum",
    "license": "ISC",
    "dependencies": {
      "@zeit/next-sass": "^1.0.1",
      "@zeit/next-typescript": "^1.1.1",
      "apollo-boost": "^0.1.16",
      "apollo-client": "^2.4.2",
      "decko": "^1.2.0",
      "downshift": "^2.2.3",
      "enzyme": "^3.6.0",
      "enzyme-adapter-react-16": "^1.5.0",
      "graphql": "^14.0.2",
      "graphql-tag": "^2.9.2",
      "graphql-tools": "^4.0.0",
      "lodash.debounce": "^4.0.8",
      "next": "^7.0.2",
      "next-with-apollo": "^3.1.3",
      "node-sass": "^4.11.0",
      "nprogress": "^0.2.0",
      "prop-types": "^15.6.2",
      "react": "^16.7.0",
      "react-adopt": "^0.6.0",
      "react-apollo": "^2.2.1",
      "react-dom": "^16.7.0",
      "react-transition-group": "^2.5.0",
      "styled-components": "^3.4.9",
      "tslint": "^5.12.1",
      "tslint-react": "^3.6.0",
      "typescript": "^3.2.4",
      "waait": "^1.0.2"
    },
    "devDependencies": {
      "@babel/plugin-proposal-decorators": "^7.3.0",
      "@babel/preset-typescript": "^7.1.0",
      "@types/enzyme": "^3.1.15",
      "@types/jest": "^23.3.13",
      "@types/next": "^7.0.6",
      "@types/react": "^16.7.20",
      "@types/react-dom": "^16.0.11",
      "@types/react-redux": "^7.0.0",
      "@types/zeit__next-typescript": "^0.1.1",
      "babel-core": "^7.0.0-bridge.0",
      "babel-jest": "^23.6.0",
      "babel-plugin-styled-components": "^1.7.1",
      "casual": "^1.5.19",
      "enzyme-to-json": "^3.3.4",
      "jest": "^23.6.0",
      "jest-transform-graphql": "^2.1.0"
    },
    "jest": {
      "setupTestFrameworkScriptFile": "&lt;rootDir&gt;/jest.setup.js",
      "testPathIgnorePatterns": [
        "&lt;rootDir&gt;/.next/",
        "&lt;rootDir&gt;/node_modules/"
      ],
      "transform": {
        "\\.(gql|graphql)$": "jest-transform-graphql",
        ".*": "babel-jest",
        "^.+\\.js?$": "babel-jest"
      }
    }
  }
  </code></pre>
  
  <p><strong>My .babelrc file</strong></p>
  
  <pre><code>{
    "env": {
      "development": {
        "presets": [
          "next/babel",
          "@zeit/next-typescript/babel"
        ],
        "plugins": [
          [
            "styled-components",
            {
              "ssr": true,
              "displayName": true
            }
          ],
          [
            "@babel/plugin-proposal-decorators",
            {
              "legacy": true
            }
          ]
        ]
      },
      "production": {
        "presets": [
          "next/babel",
          "@zeit/next-typescript/babel"
        ],
        "plugins": [
          [
            "styled-components",
            {
              "ssr": true,
              "displayName": true
            }
          ],
          [
            "@babel/plugin-proposal-decorators",
            {
              "legacy": true
            }
          ]
        ]
      },
      "test": {
        "presets": [
          [
            "next/babel",
            {
              "preset-env": {
                "modules": "commonjs"
              }
            }
          ]
        ],
        "plugins": [
          [
            "styled-components",
            {
              "ssr": true,
              "displayName": true
            }
          ]
        ]
      }
    }
  }
  </code></pre>