jest를 사용하여 jQuery UI를 가져 오는 구성 요소를 가져 오는 React 구성 요소를 테스트하는 방법

Question

react-addons-test-utils를 사용하여 React 구성 요소 (ComponentA)를 렌더링하여 스냅 샷을 만들려고합니다.

성분 A는 성분 B를 가져

부품 B 수입 'JQuery와'및 'JQuery와 - UI/UI/위젯/드래그'하고이 농담에 따라 검사를 실행하는 에러 원인 : jQuery is not defined

을 package.json의 setupFiles 속성을 사용하여 jquery 및 jquery UI를 부분적으로 성공으로 가져 오려고했습니다. Cannot read property 'mouse' of undefined

그냥 얕은 렌더링을 원하기 때문에 테스트를 위해 Component 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을 조롱합니다. 경로는 테스트 파일과 관련이 있습니다.