如何在 React 测试库 Jest 的同一组件中测试单击时呈现 html 元素的按钮？

Question

我的 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 测试库之外的任何其他测试框架。

任何建议表示赞赏。

Answer 1

你需要渲染你的组件来测试它。然后您访问该按钮，然后模拟按钮单击，然后最终期望您的更改发生。

测试库有一个名为

userEvent

的函数，它可以模拟按钮点击。

import { screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";

describe('Expand body button', async () => {
    it('should render OrderModuleBody when clicked', () => {
        // render your component
        render(<YourComponent />) 
        // access your button
        const button = screen.getByTestId('orderModuleHeaderButton') 
        // simulate button click
        userEvent.click(button); 

        // expect result
        await waitFor(() =>  
            expect(screen.getByText("Some content")).toBeInTheDocument();
       });
}