正在测试禁用的按钮reactjs

Question

我有一个React导出按钮组件，当totalRecords超过ORDER_LIMIT或等于0时，该组件将被禁用。代码如下：

interface ExportExcelButtonProps {
filterValues: OrderFilter;
totalOrders: number;
}
const ExportExcelButton: React.FC<ExportExcelButtonProps> = ({ filterValues, totalOrders }) => {
const [loading, setLoading] = useState<boolean>(false);
const disabled = totalOrders === 0 || totalOrders > ORDER_LIMIT;

const onExportBtnClick = async () => {
...
};
return (
<Button
disabled={disabled}
loading={loading}
onClick={onExportBtnClick}
type="primary"
icon={<DownloadOutlined />}
data-testid="export-btn"
>
{t("ExportExcel")}
</Button>
);
};

父组件中的代码：

const { orders, filters, pagination } = useOrderData(); // Fetch order data from this hook
const totalOrders = pagination.total || 0;
....
<ExportExcelButton filterValues={filters} totalOrders={totalOrders} />

我正试图通过这样的测试用例来测试我的ExportExcelButton：

it("exports by orderDate", async () => {
const dummyDateRange = [dayjs("2020-10-20T00:00:00+07:00"), dayjs("2020-10-30T23:59:59+07:00")];
fireEvent.change(orderDateField, { target: { value: "1", payload: dummyDateRange } });
userEvent.click(searchButton);
await waitFor(() => {
expect(getOrdersMock).toHaveBeenCalled();
});
await waitFor(() => {
expect(exportButton).toBeEnabled();
});
userEvent.click(exportButton);
await waitFor(() => {
const params = {
startDate: dummyDateRange[0].format(),
endDate: dummyDateRange[1].format(),
limit: ORDER_LIMIT,
};
expect(exportOrdersMock).toBeCalledWith(expect.objectContaining(params));
});
});

当我运行测试文件时，上面的测试用例失败了，因为导出按钮仍然被禁用

expect(element).toBeEnabled()
Received element is not enabled:
<button class="ant-btn ant-btn-primary" data-testid="export-btn" disabled="" style="pointer-events: none;" type="button" />

但当我签入快照文件时，此按钮没有disabled属性：

<button
class="ant-btn ant-btn-primary"
data-testid="export-btn"
type="button"
>

我已经在getOrdersMock中用totalOrders = 1模拟了数据。我认为组件ExportExcelButton在测试期间totalOrders发生更改时没有更新。如何更新ExportExcelButton？有其他方法来测试这个案例吗？

Answer 1

问题就在这里：

beforeEach(() => {
getOrdersMock = jest.spyOn(orderApis, "getOrdersList");
exportOrdersMock = jest.spyOn(orderApis, "exportOrders");
({ container } = render(
<Router>
<OrderList />
</Router>
));
exportButton = screen.getByTestId("export-btn") as HTMLButtonElement;
});

我在beforeEach中定义的exportButton只在第一次渲染时捕捉快照，单击searchButton后，快照将被更新。因此，我必须再次从快照中获取我的exportButton。

userEvent.click(searchButton);
await waitFor(() => {
expect(getOrdersMock).toHaveBeenCalled();
});
exportButton = screen.getByTestId("export-btn") as HTMLButtonElement; // add this line

await waitFor(() => {
expect(exportButton).toBeEnabled();
});