jest spies on component functionality

Question

私は、関数が呼び出されることを期待してコンポーネント関数をテストするためにjest spyを作成します。しかし、それは呼ばれていないようです。

これは私のテストです：

import React from 'react'; 
    import { shallow, mount } from 'enzyme'; 
    import SideNavBar from '../SideNavBar'; 
    test('Should call mock function when clicking NavBar button',() => { 
    const openNavSpy = jest.fn(); 
    const wrapper = shallow(<SideNavBar openNav={openNavSpy} />); 
    wrapper.find('i').simulate('click'); 
    expect(openNavSpy).toHaveBeenCalledTimes(1); 
    }); 

これはSideNavBarから私のいくつかの関連するコードです：

openNav =() => { 
    if (this.mySidenav) { 
     this.mySidenav.style.width = '360px'; 
    } 
    }; 
.... 
<i className="fa fa-bars" aria-hidden="true" onClick={this.openNav} /> 

Answer 1

this.openNavクラスopenNavとないあなたからSideBarNav経由で渡すスパイ小道具を参照していますあなたのテスト。あなたはmySideNavの幅が代わりに設定されたことをテストしていない理由をopenNavが呼び出されたことを代わりにテストの

test('Should call mock function when clicking NavBar button',() => { 
    const wrapper = shallow(<SideNavBar />); 
    const openNavSpy = jest.fn(); 

    wrapper.instance().openNav = openNavSpy; 

    wrapper.find('i').simulate('click'); 

    expect(openNavSpy).toHaveBeenCalledTimes(1); 
}); 

。 これは、実際にはopenNavがクリックで呼び出されたことに気にしないので、これは良いでしょう。

test('Should set the side nav width to 360px',() => { 
    const wrapper = shallow(<SideNavBar />); 

    wrapper.find('i').simulate('click'); 

    const sideNav = wrapper.instance().mySidenav; 

    expect(sideNav.style.width).toBe('360px'); 
});