微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

javascript-用Jest和Typescript模拟一个全局对象

我有一个React组件.无论好坏,我都使用js-routes公开的Routes全局对象-Rails的瑰宝.我使用Jest进行了快照测试,该快照测试了我的简单组件,该组件恰好使用了Routes全局.

在我的测试中,我想模拟Routes.因此,当我的组件调用Routes.some_path()时,我可以返回任意字符串.

我主要遇到的错误是找不到名称“ Routes”.

这是我的设置:

package.json

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

setupRoutes.ts(这似乎是最受欢迎的解决方案)

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 component;

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

  it('should render correctly', () => {
    expect(toJson(component)).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;

如果我在测试中使用console.log(window),则路由确实存在.所以我不确定为什么它不喜欢在组件中使用Routes.实际上,一定是Typescript认为它不存在,但在运行时确实如此.
我想我的问题是,如何让Typescript放松一下Routes?

解决方法:

在setupRoutes.ts中

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐