需要帮助让 1 行被 Jest (React) 覆盖答案

【问题标题】：Need help getting 1 line covered with Jest (React)需要帮助让 1 行被 Jest (React) 覆盖
【发布时间】：2020-05-15 14:18:36
【问题描述】：

这是我要介绍的功能，但是npm run coverage 仍然抱怨我没有涵盖之前的第 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)}>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({});
    });
});

我正在测试 click 道具的不同状态，但是到目前为止无法覆盖这条线，这里有什么想法吗？

【问题讨论】：

标签： javascript reactjs unit-testing jestjs jsx

【解决方案1】：

如果你稍微重构一下，你可以看到哪一行没有被调用：

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 回调。

此外，仅测试绑定到它的任何函数并不是很有用 - 绑定到像 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);
});

【讨论】：