title: Mock a global object with Jest and Typescript
body: <p>I have a React component. For good or bad, I use the <code>Routes</code> global object exposed by <code>js-routes</code> - a gem for Rails. I have a snapshot test using Jest which tests my simple component that happens to use the <code>Routes</code> global.</p>
  
  <p>In my test I want to mock <code>Routes</code>. So when my component calls <code>Routes.some_path()</code>, I can just return some arbitrary string.</p>
  
  <p>The error that I mainly get is <code>Cannot find name 'Routes'.</code>.</p>
  
  <p>Here is my setup:</p>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>"jest": {
    "globals": {
      "ts-jest": {
        "enableTsDiagnostics": true
      }
    },
    "testEnvironment": "jsdom",
    "setupFiles": [
      "&lt;rootDir&gt;/app/javascript/__tests__/setupRoutes.ts"
    ]
  ...
  </code></pre>
  
  <p><strong>setupRoutes.ts</strong> (This seemed like the most popular solution)</p>
  
  <pre><code>const globalAny:any = global;
  
  globalAny.Routes = {
    some_path: () =&gt; {},
  };
  </code></pre>
  
  <p><strong>myTest.snapshot.tsx</strong></p>
  
  <pre><code>import * as React from 'react';
  import {shallow} from 'enzyme';
  import toJson from 'enzyme-to-json';
  
  import MyComponent from 'MyComponent';
  
  describe('My Component', () =&gt; {
    let component;
  
    beforeEach(() =&gt; {
      component = shallow(&lt;MyComponent /&gt;);
    });
  
    it('should render correctly', () =&gt; {
      expect(toJson(component)).toMatchSnapshot();
    });
  });
  </code></pre>
  
  <p><strong>MyComponent.tsx</strong></p>
  
  <pre><code>import * as React from 'react';
  import * as DOM from 'react-dom';
  
  class MyComponent extends React.Component&lt;{}, {}&gt; {
  
    render() {
      return &lt;div&gt;{Routes.some_path()}&lt;/div&gt;;
    }
  }
  
  export default MyComponent;
  </code></pre>
  
  <p>If I <code>console.log(window)</code> in the test, <code>Routes</code> does exist. So I'm not sure why it doesn't like <code>Routes</code> being used int he component. In fact it must be Typescript thinking it doesn't exist but at run time it does.
  I guess my question then is how can I tell Typescript to chill out about <code>Routes</code>?</p>