1 回答

TA貢獻1833條經驗 獲得超4個贊
如果你稍微重構一下,你可以看到哪一行沒有被調用:
export const CardContainer = ({ index, icon, copy, click }) => (
<BlankCard variant="light" title={copy}>{icon}<p>{copy}</p>
{click && <a className="tile-learn-more" id={`tile-id-${index}`} onClick={() => {
click(index); // this one!
}}>Learn More</a>}
</BlankCard>
);
該行未被覆蓋,因為從未實際調用回調。onClick
此外,僅僅測試任何函數是否綁定到它并不是很有用 - 綁定到一個no-op,比如,甚至綁定到錯誤的函數,仍然會通過。這也是在測試實現,而不是行為。onClick={() => {}}
相反,模擬點擊并確保模擬被調用:
it('will do the right thing when the Learn More link is clicked', () => {
const mockOnClick = jest.fn();
const index = 1;
const props = { index, icon: 'icon', copy: 'foo', click: mockOnClick };
const wrapper = shallow(<CardContainer {...props} />);
wrapper.find('.tile-learn-more').simulate('click');
expect(mockOnClick).toHaveBeenCalledWith(index);
});
添加回答
舉報