我是 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 了解此代碼段已被測驗？
uj5u.com熱心網友回復：
不確定哪一行沒有被覆寫......雖然，這toBeCalledTimes是一個糟糕的測驗期望的跡象，所以嘗試附加到最底線：
expect(PortalAccessCardComponent.redirectToUrl).toBeCalledWith(hrefLink);
uj5u.com熱心網友回復：
最好測驗一下你想要的副作用（打開一個視窗）。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')
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/401310.html
上一篇：var回傳NaN而不是數字
下一篇：運行時分叉的快板單元測驗崩潰