My OrderModuleHeader是一个可单击的div，单击时会呈现div，如下所示：

const [orderModuleIsOpen, setOrderModuleIsOpen] = useState(true);

render (
<div>

     <OrderModuleHeader data-testid="orderModuleHeaderButton"
              onClick={() => setOrderModuleIsOpen(!orderModuleIsOpen)}
            >
              <NavigationArrow>
                <FontAwesomeIcon
                  icon={orderModuleIsOpen ? faChevronUp : faChevronDown}
                  className="fa-xs"
                />
              </NavigationArrow>
     </OrderModuleHeader>
            {orderModuleIsOpen && (
              <OrderModuleBody>Some content</OrderModuleBody>
)
 </div>)

因此，只有在单击按钮时才会显示div OrderModuleBody。
我开始我的测试如下：

describe('Expand body button', () => {
it('should render OrderModuleBody when clicked', () => {
      const button = screen.getByTestId('orderModuleHeaderButton');
      
      fireEvent.change() ... 
    });
}

我意识到我使div成为可点击的，在测试中我称它为按钮。
我不知道究竟需要在fireEvent中编写什么来测试OrderModuleBody（div）是否在单击时呈现。
注意：我不允许从Enzyme引入浅层方法或使用除Jest、React测试库之外的任何其他测试框架。
如有任何建议，我们将不胜感激。