时间戳

首页 > 解决方案 > 在 ReactJs 中测试页面 beforeonload

reactjs - 在 ReactJs 中测试页面 beforeonload

问题描述

我有一个自定义钩子，用于检查页面何时重新加载以及选项卡何时关闭。

import { useRef, useEffect } from 'react';

const useUnload = fn => {
  const cb = useRef(fn); 

  useEffect(() => {
    cb.current = fn;
  }, [fn]);

  useEffect(() => {
    const onUnload = (...args) => cb.current?.(...args);

    window.addEventListener("beforeunload", onUnload);

    return () => window.removeEventListener("beforeunload", onUnload);
  }, []);
};

export default useUnload;

如何使用：

const MyComponent = () => {
  useUnload(e => {
    e.preventDefault();
    e.returnValue = '';
  });

  return (
    <div>
      my component ...
    </div>
  );
};

基本上，当重新加载页面、更改 url 或关闭选项卡时，会出现一个模式窗口，询问您是否要离开页面。我需要用酶和玩笑来测试这个钩子。

import { mount, shallow } from 'enzyme';
import React from 'react';
import { useUnload } from '../useUnload';

const HookWrapper = ({ hook }) => {
    return <React.Component>{hook}</React.Component>;
};

describe('useUnload', () => {
  it('should render', () => {
    const wrapper = mount(
      <HookWrapper
        hook={() =>
          useUnload((e) => {
            e.preventDefault();
            e.returnValue = '';
          })
        }
      />,
    );
    console.log(wrapper.debug())
  });
});

但我得到错误：Component(...): No 渲染method found on the returned component instance: you may have forgotten to define渲染.。
谁能帮忙测试一下这个钩子？

标签： reactjs

解决方案

您遇到的错误是由您的 HookWrapper 实现引起的

React.Component 不是你应该在 JSX 中使用的东西，因此它没有渲染方法，正如错误消息所暗示的那样。

你可能想要的是 React.Fragment，或 <></> 简而言之测试钩子的功能

请注意，您通常也不像在钩子包装器中那样使用钩子

如果你像这样编写你的钩子包装器，它会工作并且你的测试将通过：

const HookWrapper = ({ hook }) => {
    hook();
    return <></>;
};

请注意，您提供的测试实际上并未测试钩子的功能。

推荐阅读