亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

需要幫助獲得1行Jest(React)

需要幫助獲得1行Jest(React)

慕工程0101907 2022-08-18 10:26:06
這就是我正在覆蓋的功能,但是仍然抱怨我沒有覆蓋之前的第4行。npm run coverageexport 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)}>Learn More</a>}    </BlankCard>);有問題的行:{click && <a className="tile-learn-more" id={`tile-id-${index}`} onClick={() => click(index)}>Learn More</a>}describe('CardContainer component', () => {    it('will contain BlankCard component', () => {        const props = { icon: 'icon', copy: 'foo' };        const wrapperBlankCard = shallow(<CardContainer {...props} />);        const blankCard = wrapperBlankCard.find('BlankCard');        expect(blankCard).toHaveLength(1);        expect(blankCard.at(0).prop('variant')).toEqual('light');        expect(blankCard.at(0).prop('title')).toEqual('foo');    });    it('will contain a Learn More link if click contains a function', () => {        const mockOnClick = jest.fn();        const props = { index: 1, icon: 'icon', copy: 'foo', click: mockOnClick };        const wrapper = shallow(<CardContainer {...props} />);        const learnMore = wrapper.find('.tile-learn-more');        expect(learnMore).toEqual({});        expect(learnMore.prop('id')).toEqual('tile-id-1');        expect(learnMore.contains('Learn More'));        expect(learnMore.prop('onClick')).toEqual(expect.any(Function));    });    it('will not contain a Learn More link if click is undefined', () => {        const props = { icon: 'icon', copy: 'foo', click: null };        const wrapper = shallow(<CardContainer {...props} />);        expect(wrapper.find('.tile-learn-more')).toEqual({});    });});我正在測試點擊道具的不同狀態,但是到目前為止還無法覆蓋該行,這里有任何想法嗎?
查看完整描述

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);

});


查看完整回答
反對 回復 2022-08-18
  • 1 回答
  • 0 關注
  • 95 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號