Javascript 试验期间参考电流未定义

TLDR-我有一个使用ref.current.offsetWidth的响应组件，但当我使用Jest测试它时，它不工作

navbar组件在localhost中工作并呈现良好。但是，当我试图使用Jest来模拟不同的屏幕宽度进行单元测试时，由于某种原因，ref钩子无法获取div长度。有没有关于如何解决这个问题的建议

错误：TypeError:无法读取未定义的属性“offsetWidth”

代码：Navbar.js

// custom hook to get live div width 
const useContainerDimensions = myRef => {
  const getDimensions = () => ({
    width: myRef.current.offsetWidth,            //location of error
  });

  const [dimensions, setDimensions] = useState({ width: 0 });

  useEffect(() => {
    const handleResize = () => {
      setDimensions(getDimensions());
    };
    if (myRef.current) {
      setDimensions(getDimensions());
    }

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, [myRef]);

  return dimensions;
};

const Navbar = () => {
  const inputRef = useRef();
  const { width } = useContainerDimensions(inputRef);

  useEffect(() => {
    if (width >= 890) {
      setCurrTabPerRow(5);
      setTabStyle('5 tabs');
    }
    if (width < 890) {
      setCurrTabPerRow(4);
      setTabStyle('4 tabs');
    }
  }, [width]);

  return (
    ... 
    <div ref={inputRef}>
      //...stuff
    </div>
    ...
  )
}

export default Navbar;

navbar.test.js

const resizeWindow = (x, y) => {
  window.innerWidth = x;
  window.innerHeight = y;
  window.dispatchEvent(new Event('resize'));
}

describe('Navbar component', () => {
  it('should render', () => {
    const component = mount(
      <Navbar filter>
        <Navbar.Tab id="stuff1" />
        <Navbar.Tab id="stuff2" />
        <Navbar.Tab id="stuff3" />
      </Navbar>
    );
    act(() => {
      resizeWindow(500, 300);
    });
    expect(component).toMatchSnapshot();
  });
});

---

useRef钩子最初没有值。在声明inputRef之后，您正在传递它

尝试这样做：

const[containerWidth，setContainerWidth]=useState0； useEffect=>{ ifinputRef.current{ const{width}=useContainerDimensionsinputRef； setContainerWidthwidth； } }，[inputRef]

---

然后，在传递到自定义钩子之前，确保inputRef有一些值。

useRef钩子最初没有值。在声明inputRef之后，您正在传递它

尝试这样做：

const[containerWidth，setContainerWidth]=useState0； useEffect=>{ ifinputRef.current{ const{width}=useContainerDimensionsinputRef； setContainerWidthwidth； } }，[inputRef]

---

然后，在传递到自定义挂钩之前，确保inputRef具有一些值。

ref的初始值未定义。在访问其他属性之前，只需检查myRef.current是否存在。并提供一个回退值

const getDimensions = () => ({
  width: (myRef.current && myRef.current.offsetWidth) || 0,
});

或者使用可选链接

const getDimensions = () => ({
  width: myRef?.current?.offsetWidth || 0,
});

---

ref的初始值未定义。在访问其他属性之前，只需检查myRef.current是否存在。并提供一个回退值

const getDimensions = () => ({
  width: (myRef.current && myRef.current.offsetWidth) || 0,
});

或者使用可选链接

const getDimensions = () => ({
  width: myRef?.current?.offsetWidth || 0,
});