我有一个组件可以映射一些方向并<button>为每个方向渲染一个。单击按钮时，它被禁用。
我必须设置一个测试来确定单击后按钮是否被禁用。
我的组件：
<div>
{sortDirections.map((sortDirection) => (
<button
key={sortDirection}
disabled={
sortFilters.direction === sortDirection &&
sortFilters.payType === sortVariant.payType
}
className="btn"
onClick={() =>
handleSortFilters({
payType: sortVariant.payType,
direction: sortDirection,
})
}
>
{sortDirection}
</button>
))}
</div>
到目前为止，我将提供我的测试，但它确实有错误
it('Sort button should be disabled on click', () => {
render(
<ProductSorter
sortFilters={sortFilters}
handleSortFilters={handleSortFilters}
/>
);
expect(screen.getAllByRole('button')).toHaveLength(4);
// ERROR: Argument of type 'HTMLElement[]' is not assignable to parameter of type 'Element | Node | Document | Window'.
fireEvent.click(screen.getAllByRole('button'));
});
我可以成功测试一个按钮，但由于它是一组按钮而挣扎，我需要测试每个按钮。想知道我是否必须单独编写具有特定测试的每个按钮？
您应该能够在数组上使用 forEach 循环：
it('Sort button should be disabled on click', () => {
render(
<ProductSorter
sortFilters={sortFilters}
handleSortFilters={handleSortFilters}
/>
);
const buttons = screen.getAllByRole('button')
buttons.forEach((x)=>expect(x).toHaveProperty('disabled'))
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句