如何使用笑話來測試將導入進口jQuery UI的

我試圖用反應 - 插件 - 測試 - utils的淺層呈現陣營組件（ComponentA），這樣我可以快照它的部件的陣營組成部分。如何使用笑話來測試將導入進口jQuery UI的

組分A出口組件B.

成分B進口 'jquery的' 和 '的jquery-UI/UI /部件/可拖動'，這會導致下玩笑運行測試時的錯誤： jQuery is not defined

我曾嘗試使用setupFiles財產的package.json導入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');

來源

2017-04-10 Dan

最簡單的方法就是模擬出ComponentB這樣

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

這將使ComponentB在快照<ComponentB/>。請注意，該路徑與您的測試文件相關。

來源

2017-04-11 06:45:31

完美，謝謝。 – Dan

如何使用笑話來測試將導入進口jQuery UI的

回答

相關問題