javascript - Mock a global object with Jest and Typescript - Stack Overflow

admin管理员组

文章数量:1289834

I have a React ponent. For good or bad, I use the Routes global object exposed by js-routes - a gem for Rails. I have a snapshot test using Jest which tests my simple ponent that happens to use the Routes global.

In my test I want to mock Routes. So when my ponent calls Routes.some_path(), I can just return some arbitrary string.

The error that I mainly get is Cannot find name 'Routes'..

Here is my setup:

package.json

"jest": {
  "globals": {
    "ts-jest": {
      "enableTsDiagnostics": true
    }
  },
  "testEnvironment": "jsdom",
  "setupFiles": [
    "<rootDir>/app/javascript/__tests__/setupRoutes.ts"
  ]
...

setupRoutes.ts (This seemed like the most popular solution)

const globalAny:any = global;

globalAny.Routes = {
  some_path: () => {},
};

myTest.snapshot.tsx

import * as React from 'react';
import {shallow} from 'enzyme';
import toJson from 'enzyme-to-json';

import MyComponent from 'MyComponent';

describe('My Component', () => {
  let ponent;

  beforeEach(() => {
    ponent = shallow(<MyComponent />);
  });

  it('should render correctly', () => {
    expect(toJson(ponent)).toMatchSnapshot();
  });
});

MyComponent.tsx

import * as React from 'react';
import * as DOM from 'react-dom';

class MyComponent extends React.Component<{}, {}> {

  render() {
    return <div>{Routes.some_path()}</div>;
  }
}

export default MyComponent;

If I console.log(window) in the test, Routes does exist. So I'm not sure why it doesn't like Routes being used int he ponent. 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 Routes?

I have a React ponent. For good or bad, I use the Routes global object exposed by js-routes - a gem for Rails. I have a snapshot test using Jest which tests my simple ponent that happens to use the Routes global.

In my test I want to mock Routes. So when my ponent calls Routes.some_path(), I can just return some arbitrary string.

The error that I mainly get is Cannot find name 'Routes'..

Here is my setup:

package.json

"jest": {
  "globals": {
    "ts-jest": {
      "enableTsDiagnostics": true
    }
  },
  "testEnvironment": "jsdom",
  "setupFiles": [
    "<rootDir>/app/javascript/__tests__/setupRoutes.ts"
  ]
...

setupRoutes.ts (This seemed like the most popular solution)

const globalAny:any = global;

globalAny.Routes = {
  some_path: () => {},
};

myTest.snapshot.tsx

import * as React from 'react';
import {shallow} from 'enzyme';
import toJson from 'enzyme-to-json';

import MyComponent from 'MyComponent';

describe('My Component', () => {
  let ponent;

  beforeEach(() => {
    ponent = shallow(<MyComponent />);
  });

  it('should render correctly', () => {
    expect(toJson(ponent)).toMatchSnapshot();
  });
});

MyComponent.tsx

import * as React from 'react';
import * as DOM from 'react-dom';

class MyComponent extends React.Component<{}, {}> {

  render() {
    return <div>{Routes.some_path()}</div>;
  }
}

export default MyComponent;

If I console.log(window) in the test, Routes does exist. So I'm not sure why it doesn't like Routes being used int he ponent. 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 Routes?

• javascript
• reactjs
• typescript
• jestjs

Share Improve this question Follow asked Feb 28, 2018 at 10:21 preevepreeve 1,1981212 silver badges1111 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

In setupRoutes.ts

(global as any).Routes = {
  some_path: () => {}
};

本文标签： javascriptMock a global object with Jest and TypescriptStack Overflow