使用Window.onload的React组件Jest测试报setOnPage不是函数如何解决

问题原因 #

• 组件代码存在写法错误：你直接将setOnPage("/registrarse")的执行结果赋值给window.onload，组件渲染时会立刻执行setOnPage，而非等页面加载完成后触发。同时该写法直接覆盖全局window.onload事件，可能影响其他逻辑。
• 测试时未传递正确的setOnPage属性：你当前测试的是SignInScreen组件，若该组件内部引用了SignUpForm，则需要将setOnPage属性透传给子组件，或测试时直接传入mock的setOnPage函数，否则子组件拿到的setOnPage是undefined，调用时就会抛出"不是函数"的错误。

修复步骤 #

1. 修正SignUpForm组件的事件绑定逻辑，使用useEffect处理副作用，避免直接在组件顶层操作全局事件：

import { useEffect } from 'react'

function SignUpForm(props) {
  const history = useHistory();
  const { setOnPage } = props;

  useEffect(() => {
    // 定义load事件回调
    const handlePageLoad = () => setOnPage("/registrarse");
    // 绑定事件
    window.addEventListener('load', handlePageLoad);
    // 组件卸载时清理事件，避免内存泄漏
    return () => window.removeEventListener('load', handlePageLoad);
  }, [setOnPage])
  // 剩余组件逻辑...
}

2. 修正测试用例，给组件传入mock的setOnPage函数：
   如果是直接测试SignUpForm组件，调整测试代码如下：

import React from 'react'
import Enzyme from "enzyme";
import { screen, render } from '@testing-library/react'
// 导入要测试的SignUpForm组件
import SignUpForm from './SignUpForm'
import Adapter from "enzyme-adapter-react-16";

const { shallow } = Enzyme; 
Enzyme.configure({ adapter: new Adapter() })

describe('Test for SignUpForm', () => {
    test("renders correctly", () => {
        // 创建mock函数传入组件
        const mockSetOnPage = jest.fn();
        shallow(<SignUpForm setOnPage={mockSetOnPage} />);
        // 可添加断言验证逻辑正确性，比如页面加载后是否触发了mock函数
      });
});

如果是测试SignInScreen，需要确保SignInScreen内部给SignUpForm传递了正确的setOnPage属性，测试时给SignInScreen传入对应的mock函数即可。

内容的提问来源于stack exchange，提问作者DanielRomero