如何编写此测试以获得完整的覆盖率？

Question

我是新的反应开发和学习测试与Jest和反应测试库(RTL)。

但是，我很难完成以下组件的全部覆盖：

import {
  CustomCardActions,
  CustomCardHeader,
} from '@Custom/react';
import React from 'react';
import {
  PortalAccessButton,
  PortalAccessContext,
  PortalAccessInternalCard,
  PortalAccessTitle,
} from './styles';

interface PortalAccessCard {
  children: React.ReactNode
  buttonText: string;
  hrefLink: string;
}

export const redirectToUrl = (hrefLink: string) => {
  window.open(hrefLink, '_self');
};

const PortalAccessCard = (props: PortalAccessCard) => {
  const { children, buttonText, hrefLink } = props;

  return (
    <PortalAccessContext inverse>
      <PortalAccessInternalCard>

        <CustomCardHeader>
          <PortalAccessTitle variant="heading-4">
            {children}
          </PortalAccessTitle>
        </CustomCardHeader>

        <CustomCardActions>
          <PortalAccessButton onCustomClick={() => redirectToUrl(hrefLink)}>
            {buttonText}
          </PortalAccessButton>
        </CustomCardActions>

      </PortalAccessInternalCard>
    </PortalAccessContext>
  );
};

export default React.memo(PortalAccessCard);

这里有两个细节：

"redirectToUrl" 1- 1- --我导出了方法以便能够测试它.我不能说是否有更好的出路，但也许第二个问题解决了这个问题。

2-当我检查覆盖率报告时，它说这个部分() => redirectToUrl(hrefLink)还没有经过测试，但是它基本上是指向我上面导出的方法的指针。

我的测试看起来如下：

import { render, RenderResult } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import PortalAccessCard from '.';
import * as PortalAccessCardComponent from '.';

describe('PortalAccessCard', () => {
  let renderResult: RenderResult;
  const hrefLink = '#';

  beforeEach(() => {
    renderResult = render(
      <PortalAccessCard
        buttonText="Texto do botão"
        hrefLink={hrefLink}
      >
        Texto interno PortalAccessCard.
      </PortalAccessCard>,
    );
  });

  it('should call onCustomClick and redirectToUrl', async () => {
    window.open = jest.fn();
    jest.spyOn(PortalAccessCardComponent, 'redirectToUrl');
    const onCustomClick = jest.fn(() => PortalAccessCardComponent.redirectToUrl(hrefLink));

    const CustomButtonElement = renderResult.container.getElementsByTagName('Custom-button')[0];
    CustomButtonElement.onclick = onCustomClick;

    await userEvent.click(CustomButtonElement);
    expect(onCustomClick).toBeCalledTimes(1);
    expect(PortalAccessCardComponent.redirectToUrl).toBeCalledTimes(1);
  });
});

我能做些什么来使onCustomClick事件的测试调用调用redirectToUrl方法，以便Jest了解这个片段已经过测试？

Answer 1

不确定哪条线没有被覆盖..。不过，toBeCalledTimes是测试期望不佳的标志，所以请尝试附加到最基本的内容：

    expect(PortalAccessCardComponent.redirectToUrl).toBeCalledWith(hrefLink);

Answer 2

最好是测试你想要的副作用(打开一个窗口)。redirectToUrl是一个实现细节。我觉得你让这件事变得比需要的困难多了。

间谍在window.open，点击项目，检查间谍。我想这就是你所需要的。

jest.spyOn(window, 'open')

const CustomButtonElement = renderResult.container.getElementsByTagName('Custom-button')[0];
await userEvent.click(CustomButtonElement);
// or maybe: getByRole('something...').click()

expect(window.open).toHaveBeenCallWith('#', '_self')