小编Fab*_*les的帖子

我\xc2\xb4m正在开发一个小组件，该组件根据屏幕的大小更改一个标签。I\xc2\xb4m 使用 useLayoutEffect() 观察屏幕尺寸并在达到某个限制时更改标签。

import React, { useLayoutEffect, useState } from 'react';\n\nconst minimumWidth = 768;\n\nconst MyComponent = () => {\n   const [label, setLabel] = useState('LABEL');\n\n   useLayoutEffect(() => {\n      const RO = new ResizeObserver((e) => {\n      if (e[0].target.clientWidth < minimumWidth) {\n        setLabel('LABEL');\n      } else {\n        setLabel('LA');\n      }\n   });\n\n   RO.observe(document.body);\n\n   return () => RO.disconnect();\n   }, []);\n\n   return (\n     <div data-testid="label_container">\n       {label}\n    </div>\n   );\n};\n\nexport default MyComponent;\n

现在我需要进行测试来触发屏幕大小的调整并期望标签发生变化。但我无法触发使用布局效果。\n已经尝试过这个：

import React from 'react';\nimport { render, screen } from '@testing-library/react';\n\nimport MyComponent from './MyComponent';\n\ndescribe('MyComponent', …