在Jest測試中模擬用戶與React組件的交互

Question

我有一個按鈕React組件，我想用Jest測試。

我想測試用戶與組件的交互。

當用戶點擊Jest測試中的按鈕時，如何測試按鈕的動作。

我的測試是這樣的：

describe('My button component',() => { 
    it('does something when it is clicked',() => { 
     const comp = (<MyButton onClick={onClick}></MyButton>); 
     // ... how can I simulate a user click and assert the change in the DOM? 
    }); 
}); 

function onClick() {} 

Answer 1

可以使用jest.fn()

describe('My button component',() => { 
    it('does something when it is clicked',() => { 
    const mockOnClick = jest.fn() 
    const comp = (<MyButton onClick={mockOnClick}></MyButton>) 

    component.find(MyButton).simulate('click') 
    expect(mockOnClick.mock.calls.length).toBe(1) 

    }) 
}) 

嘲笑功能，您可以跟隨進一步的說明here。