Jest/Enzyme不能模擬類屬性

我目前正在用Jest an Enzyme編寫React組件的測試。當我必須模擬一個用箭頭語法編寫的類屬性函數時，我被困住了：模擬不適用。Jest/Enzyme不能模擬類屬性

下面是測試組件的摘錄：

class MaClass extends React.Component { 
    ... 
    componentWillMount() { 
    this.getNotifications() 
    } 
    getNotifications =() => { 
    axios.get(window.Routing.generate(
     'api_notifications_get_collection' 
    ), { 
     headers: { 
     'Accept': 'application/json' 
     } 
    }).then(response => { 
     this.setState({ 
     notifications: response.data 
     }) 
    }).catch(error => { 
     console.log('Error : ', error) 
    }) 
    } 
    ... 
}

這裏是測試：

import React from 'react' 
import { configure, shallow } from 'enzyme' 
import Adapter from 'enzyme-adapter-react-15' 

import NotificationsComponent from './NotificationsComponent' 

configure({adapter: new Adapter()}) 

describe('Testing NotificationsComponent',() => { 
    /** 
    * This should call getNotifications 
    */ 
    test('getNotifications should be called',() => { 
    let wrapper = shallow(<NotificationsComponent />) 
    const getMock = jest.fn() 
    wrapper.instance().getNotifications = getMock 
    wrapper.update() 
    expect(getMock).toHaveBeenCalled() 
    }) 
})

至於讀，這是常規的方法做正確的方式。但似乎用箭頭語法編寫的類屬性函數不能被這種方式嘲笑。

我的終端拋出關於什麼是測試的組件方法中的錯誤：

TypeError: Cannot read property 'generate' of undefined

這意味着，模擬不通過。

有人會指出我的錯誤在哪裏嗎？謝謝。

來源

2017-10-17 Neovea

您正在使用錯誤的生命週期鉤子。 componentWillMount被稱爲「裏面」shallow(<NotificationsComponent />)。因此原始的getNotifications已被調用。

wrapper.update()強制重新渲染並且不重新安裝該組件，因此您對模擬的分配沒有達到預期的效果。

來源

2017-10-17 09:19:48 lipp

我用'mount'也沒有運氣。 – Neovea

'mount'會重置你的組件......你可以傳遞'getNotifications'作爲道具，就像這裏https://stackoverflow.com/questions/41598559/how-to-spy-componentwillmount-using-jest-and-enzyme 。如果您正在使用REDX或其他國家管理，無論如何這將是有益的。 – lipp

其實我不確定這是否像我們的例子那樣能夠勝任我的需求，他定義了'this.props.fetch（'data'）'。我不測試道具，我正在測試類屬性，就像我之前給出的例子：'getNotifications =（）=> {...}'。這裏的重要部分是它使用'=（）=>'。 – Neovea

Jest/Enzyme不能模擬類屬性

回答

相關問題