React/Jest：Reactコンポーネントの模擬関数

Question

私はテストを書くことを学んでいます。私は自分のコンポーネントから関数を嘲笑しています。簡潔にするためにいくつかのコードが削除されました。デフォルトでは、Bannerは4 BannerItemをレンダリングします。しかし私のテストでは、1つのレンダリングだけをテストしたいですBannerItem。私は私の機能を試してみるために他の例を参照してきましたが、それをトラブルシューティングすることはできません。

const renderSlides = (numberOfSlides, activeSlide) => (
    range(1, numberOfSlides + 1).map((slide, i) => (
     <BannerItem 
      key={i} 
      index={i} 
     /> 
    )) 
); 

class Banner extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { activeSlide: 1 }; 
    } 

    setBannerState(state) { 
     this.setState({ activeSlide: state }); 
    } 

    render() { 
     const numberOfSlides = 4; 
     return (
      <div> 
       {renderSlides(numberOfSlides, this.state.activeSlide)} 
      </div> 
     ); 
    } 
} 

あなたのjest.fn()モック実装を定義する必要がテスト

import React from 'react'; 
import { shallow } from 'enzyme'; 
import { PureBanner } from '../../../../src/modules/banners/Banner'; 

describe('<Banner />',() => { 
    const mock = jest.fn(); 

    let component; 

    it('render banner with one item',() => { 
     component = shallow(<PureBanner {...props} />); 
     component.instance().renderSlides = jest.fn(); 
     component.update(); 
     component.instance().renderSlides(1, component.state().activeSlide); 
     expect(component.find('BannerItem')).toHaveLength(1); 
    }); 
} 

Answer 1

。今は何もしていません。

だから、あなたが何かのように、あなたのテストを更新することができ、

component.instance().renderSlides = jest.fn(() => [<BannerItem/>]); 

は例in the documentation hereを参照してください。

オーバーモックには注意してください。私はあなたがその方法をそのままにしておき、可能であれば、嘲笑なしで結果を検証する方法を見つけることを奨励するだろう。