测试文档.body.appendChild在useScript React钩子(Jest/Ezyme)中被调用

Question

我正在Jest中为这个useScript钩子编写单元测试：https://usehooks.com/useScript/

我的项目使用Jest/Enzyme进行测试(我们不使用React测试库(

我试图测试是否调用了document.body.appendChild，但当我运行测试时，我从Jest:得到了这个响应

应为：ObjectContaining｛"src"https://code.jquery.com/jquery-3.6.0.slim.min.js"quot；类型"："text/javascript"}呼叫次数：0

useHook脚本的简化版本：

export const useScript = (src) => {
const [status, setStatus] = useState(src ? 'loading' : 'idle');
useEffect(
() => {
if (!src) {
setStatus('idle');
return;
}
let script = document.querySelector(`script[src="${src}"]`);
if (!script) {
script = document.createElement('script');
console.log(`document: ${document}`);
script.src = src;
script.async = true;
script.setAttribute('data-status', 'loading');
document.body.appendChild(script);
}
},
[src] 
);
return status;
};

Jest测试：

import { useEffect, useState } from 'react';
import { useScript } from '../useScript';
const mockSetStatus = jest.fn();
jest.mock('../../../makeScriptDOMElement');
jest.mock('react');
const mockScriptSrc = 'https://code.jquery.com/jquery-3.6.0.slim.min.js';
describe('useScript', () => {
afterEach(() => {
jest.clearAllMocks();
});

it('should append the script to the document body', async () => {
useState.mockReturnValueOnce(['loading', mockSetStatus]);
useScript(mockScriptSrc);
const [effect] = useEffect.mock.calls[0];
await effect();
jest.spyOn(document.body, 'appendChild');
expect(document.body.appendChild).toBeCalledWith(
expect.objectContaining({
type: 'text/javascript',
src: mockScriptSrc,
})
);
});
});

Answer 1

在执行effect函数之前，您应该监视document.body.appendChild()方法。

it('should append the script to the document body', async () => {
jest.spyOn(document.body, 'appendChild');
useState.mockReturnValueOnce(['loading', mockSetStatus]);
useScript(mockScriptSrc);
const [effect] = useEffect.mock.calls[0];
await effect();
expect(document.body.appendChild).toBeCalledWith(
expect.objectContaining({
type: 'text/javascript',
src: mockScriptSrc,
})
);
});