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

Question

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

欢迎提出任何建议。

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();
});
}