如何在测试中触发useLayoutEffect？（使用 Jest 和反应测试库）

Question

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

\n

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

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

\n

import React from 'react';\nimport { render, screen } from '@testing-library/react';\n\nimport MyComponent from './MyComponent';\n\ndescribe('MyComponent', () => {\n  beforeEach(() => {\n    global.innerWidth = 500;\n    global.dispatchEvent(new Event('resize'));\n  });\n\n  it('should render correctly when screen width is less than 768', () => {\n    createComponent();\n    console.log(window.innerWidth);\n    expect(screen.getByTestId('label_container')).toHaveTextContent(\n      'LA'\n    );\n  });\n});\n\nconst createComponent = () => {\n  return render(<MyComponent />);\n};\n

\n

但组件中并没有触发layoutEffect。有没有办法只用笑话和反应测试库来测试这个？（我不想\xc2\xb4t想使用Enzyme或Cypress）

\n