如何测试文档未定义的RTL?

Question

我有以下的react钩子，它将焦点带到给定的ref上，并在卸载时将焦点返回到先前关注的元素。

export default function useFocusOnElement(elementRef: React.RefObject<HTMLHeadingElement>) {
const documentExists = typeof document !== 'undefined';
const [previouslyFocusedEl] = useState(documentExists && (document.activeElement as HTMLElement));
useEffect(() => {
if (documentExists) {
elementRef.current?.focus();
}
return () => {
if (previouslyFocusedEl) {
previouslyFocusedEl?.focus();
}
};
}, []);
}

这是我为它写的测试。

/**
* @jest-environment jsdom
*/
describe('useFocusOnElement', () => {
let ref: React.RefObject<HTMLDivElement>;
let focusMock: jest.SpyInstance;
beforeEach(() => {
ref = { current: document.createElement('div') } as React.RefObject<HTMLDivElement>;
focusMock = jest.spyOn(ref.current as HTMLDivElement, 'focus');
});
it('will call focus on passed ref after mount ', () => {
expect(focusMock).not.toHaveBeenCalled();
renderHook(() => useFocusOnElement(ref));
expect(focusMock).toHaveBeenCalled();
});
});

我还想测试document未定义的情况，因为我们也做SSR。在钩子中，我正在检查document是否存在，并且我想测试这两种情况。

JSDOM包含的文档，所以我觉得我需要删除它和一些如何捕获错误在我的测试?

Answer 1

首先，要将document模拟为undefined，您应该这样模拟它:

jest
.spyOn(global as any, 'document', 'get')
.mockImplementationOnce(() => undefined);

但是在你的测试中，你需要在renderHook中设置spyOn，因为看起来它也在内部使用文档，如果你在它之前设置spyOn，你会得到一个错误。

工作测试例:

it('will NOT call focus on passed ref after mount', () => {
expect(focusMock).not.toHaveBeenCalled();
renderHook(() => {
jest
.spyOn(global as any, 'document', 'get')
.mockImplementationOnce(() => undefined);
useFocusOnElement(ref);
});
expect(focusMock).not.toHaveBeenCalled();
});

Answer 2

您应该能够通过创建带有节点环境的第二个测试文件来做到这一点:

/**
* @jest-environment node
*/
describe('useFocusOnElement server-side', () => {
...
});

Answer 3

我最终使用了https://github.com/airbnb/jest-wrap的wrapWithGlobal和wrapWithOverride。

describe('useFocusOnElement', () => {
let ref: React.RefObject<HTMLDivElement>;
let focusMock: jest.SpyInstance;
let activeElMock: unknown;
let activeEl: HTMLDivElement;
beforeEach(() => {
const { window } = new JSDOM();
global.document = window.document;
activeEl = document.createElement('div');
ref = { current: document.createElement('div') };
focusMock = jest.spyOn(ref.current as HTMLDivElement, 'focus');
activeElMock = jest.spyOn(activeEl, 'focus');
});
wrapWithOverride(
() => document,
'activeElement',
() => activeEl,
);
describe('when document present', () => {
it('will focus on passed ref after mount and will focus on previously active element on unmount', () => {
const hook = renderHook(() => useFocusOnElement(ref));
expect(focusMock).toHaveBeenCalled();
hook.unmount();
expect(activeElMock).toHaveBeenCalled();
});
});
describe('when no document present', () => {
wrapWithGlobal('document', () => undefined);
it('will not call focus on passed ref after mount nor on previously active element on unmount', () => {
const hook = renderHook(() => useFocusOnElement(ref));
expect(focusMock).not.toHaveBeenCalled();
hook.unmount();
expect(activeElMock).not.toHaveBeenCalled();
});
});
});