jestを使用してjQuery UIをインポートするコンポーネントをインポートするReactコンポーネントをテストするには

Question

リアクションコンポーネント（ComponentA）をリアクションコンポーネント（ComponentA）にスナップショットするためにreact-addons-test-utilsを使用しようとしています。

成分Aは、成分B

成分B輸入 'jQueryの' と 'jqueryの-UI/UI /ウィジェット/ドラッグ' と冗談の下でテストを実行しているときは、このエラーが発生しインポート： jQuery is not defined

を私はpackage.jsonのsetupFilesプロパティを使用してjqueryとjquery UIを部分的にしかインポートできないようにしました。 Cannot read property 'mouse' of undefined

私はちょうど浅いレンダリングが必要なので、私はテストのためにコンポーネントBに何か気にしないので、私はjqueryとjquery UIをモックアウトできると思った。ただし、jest.mock('jquery)を使用しても、jQuery is not definedエラーは修正されません。

これ以上のアプローチは実行可能か、別のルートをまとめて行う必要はありますか？

例コード：

ComponentA.tsx

import * as React from 'react'; 
import { AppState } from 'state/appState'; 
import { ComponentB } from 'components/b'; 

export class ComponentA extends React.Component<void, AppState> { 
    public render(): JSX.Element { 
     return (
      <div> 
       <ComponentB/> 
      </div> 
     ); 
    } 
} 

ComponentB.tsx

import * as React from 'react'; 
import * as $ from 'jquery'; 
import 'jquery-ui/ui/widgets/draggable'; 

export class ComponentB extends React.Component<{}, {}> { 
    // Lots of stuff with jQuery UI 
} 

Test.tsx

// Failed mocking of jquery 
jest.mock('jquery'); 
jest.mock('jquery-ui/ui/widgets/draggable'); 

// Test file 
import * as React from 'react'; 
import * as ReactTestUtils from 'react-addons-test-utils'; 
import { ComponentA } from 'components/a'; 

describe('ComponentA', 
    () => { 
     const shallowRenderer = ReactTestUtils.createRenderer(); 

     it('renders correctly', 
      () => { 
       // Act 
       const tree = shallowRenderer.render(
        <ComponentA/> 
       ); 

       // Assert 
       expect(tree).toMatchSnapshot(); 
      }); 
    }); 

失敗しましたsetupFileコンテンツ

var $ = require('jquery'); 
global.$ = global.jQuery = $; 
require('jquery-ui'); 

Answer 1

最も簡単な方法は、これはあなたのスナップショットに<ComponentB/>としてComponentBをレンダリングします。この

jest.mock('components/b',()=> ({ 
    ComponentB:() => 'ComponentB' 
})) 

ようComponentBをモックとしています。パスはテストファイルとの相対パスであることに注意してください。