如何编写此测试以实现完整覆盖？答案

【问题标题】：How do I write this test for complete coverage?如何编写此测试以实现完整覆盖？
【发布时间】：2021-12-30 18:17:54
【问题描述】：

我是 React 开发新手，正在学习使用 Jest 和 React 测试库 (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);

这里有两个细节：

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

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 了解这个sn-p 已经过测试？

【问题讨论】：

标签： reactjs typescript unit-testing jestjs ts-jest

【解决方案1】：

不确定哪一行没有被覆盖...不过，toBeCalledTimes 是测试预期不佳的标志，因此请尝试附加到最底线：

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

【讨论】：

【解决方案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')

【讨论】：

无效：Number of calls: 0