测试 document.body.appendChild 在 useScript React 钩子（Jest / Enzyme）中被调用

Question

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

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

我正在尝试测试 document.body.appendChild 是否已被调用，但是当我运行测试时，我从 Jest 得到了这个响应：

Expected: ObjectContaining {"src": "https://code.jquery.com/jquery-3.6.0.slim.min.js", "type": "text/javascript"} Number of calls: 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;
    };

笑话测试：

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,
      })
    );
  });

测试 document.body.appendChild 在 useScript React 钩子（Jest / Enzyme）中被调用

test document.body.appendChild being called in useScript React hook (Jest / Enzyme)

javascript

reactjs

jestjs

enzyme

react-hooks