[英]Unit Testing Custom React Hooks in TypeScript using Jest and @testing-library/react-hooks
[英]How to use react-hooks with Jest and react-testing-library
我在使用React掛鈎的測試組件時遇到問題。 我需要測試單擊按鈕后,是否在更新螞蟻設計范圍選擇器內的日期范圍。 為了進行測試,我使用了Jest和react-testing-library。
在這一點上,它看起來像這樣:(其中一些嵌套組件只是styled-components :))
Parent.jsx:
const Parent = () => {
const [dateRange, setDateRange] = useState([moment(), moment()]);
return (
<div>
<Sidebar
visible={sidebarVisible}
setSidebarVisible={setSidebarVisible}
setTableData={setTableData}
setStatementsLength={setStatementsLength}
setDateRange={setDateRange}
dateRange={dateRange}
/>
</div>
);
};
export default Parent;
Sidebar.jsx:
const Sidebar = props => {
return (
<div>
<Drawer
placement="left"
closable={false}
onClose={() => props.setSidebarVisible(false)}
visible={props.visible}
width={488}
bodyStyle={drawerStyle}
>
<DrawerContent data-test-id="statementsSidebar">
<DrawerHeader data-test-id="statementsSidebarHeader">
{t('settlements.statements.sidebar.createQuery')}
</DrawerHeader>
<DrawerBody>
<DateSelect
dateRange={props.dateRange}
setDateRange={props.setDateRange}
/>
</DrawerBody>
<DrawerFooter/>
</DrawerContent>
</Drawer>
</div>
);
};
export default Sidebar;
DateSelect.jsx:
const DateSelect = props => {
const RangePicker = DatePicker.RangePicker;
const [offset, setOffset] = useState(0);
const timeUnit = Object.freeze({ day: 'd', week: 'w', month: 'm' });
const [offsetUnit, setOffsetUnit] = useState(timeUnit.day);
const setRangeToLastWeek = () => {
if (offset > 0) {
props.setDateRange([
moment().subtract(1, 'w'),
moment().add(offset, 'd'),
]);
} else if (offset < 0) {
props.setDateRange([
moment()
.subtract(1, 'w')
.add(offset, 'd'),
moment(),
]);
} else {
props.setDateRange([moment().subtract(1, 'w'), moment()]);
}
setOffsetUnit('w');
};
const manuallySetDate = range => {
setOffset(0);
props.setDateRange(range);
};
return (
<div>
<HeaderRow/>
<DateSelectorRow>
<ButtonsColumn>
<Button
value="lastWeek"
onClick={setRangeToLastWeek}
style={styleButtonPadding}
data-test-id="setRangeToLastWeek"
data-testid="lastWeekButton"
>
Last 7 days
</Button>
</ButtonsColumn>
<div data-testid="range-picker-value">
<RangePicker
value={props.dateRange}
format={DateFormat}
onChange={v => manuallySetDate(v)}
/>
</div>
</DateSelectorRow>
</div>
);
};
export default DateSelect;
DateSelect.test.js:
it('After clicking last 7 days button date range is changed', () => {
// const setDateRange = ??????
const range = [moment(), moment()];
const { container } = render(<DateSelect setDateRange={setDateRange} dateRange={range}/>);
const startDate = getByPlaceholderText(container, 'Start date');
const endDate = getByPlaceholderText(container, 'End date');
const lastWeekButton = getByTestId(container,'lastWeekButton');
expect(startDate.value).toBe(moment().format(DateFormat));
expect(endDate.value).toBe(moment().format(DateFormat));
fireEvent.click(lastWeekButton);
expect(startDate).toBe(moment().subtract(1, 'w').format(DateFormat));
expect(endDate.value).toBe(moment().format(DateFormat));
});
不出所料,由於我沒有將setDateRange函數作為對內部測試中DateSelect組件的支持,因此范圍值不會改變。 我試圖像這樣在測試中添加一個鈎子:
const [dateRange, setDateRange] = [moment(), moment()];
但是我得到了: 只能在函數組件的主體內部調用掛鈎。 所以我想我不能在那里使用它。 有什么解決辦法嗎? 如何在測試中指定像鈎子一樣的setDateRange
函數?
我發現了這一點: https : //github.com/mpeyper/react-hooks-testing-library但是看起來這是用於自定義鈎子的嗎?
也許對此測試用例有一個解決方案,而無需使用react-hooks? 任何想法高度贊賞。 :)
您必須渲染Parent
因為它包含更新DateSelect
的邏輯。 這使您可以進行更好的測試,因為您正在測試組件之間的集成是否有效。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.