#javascript #reactjs #typescript #jestjs #ts-jest
Вопрос:
Я начинающий шутник в react, как узнать, когда мне следует над чем-то поиздеваться? Например, внутри «ListItem» у меня есть «нажмите на меня», когда он нажат, под которым появится раскрывающийся список «камеры», поэтому, если я должен проверить, что происходит, когда нажимается «нажмите на меня» или что в нем содержится. Мне нужно посмеяться над этим или над чем-то еще? В данный момент с помощью моего кода я проверяю наличие компонента.
import { List, ListItem, ListItemText, ListItemSecondaryAction, Collapse, IconButton, MenuItem, } from "@material-ui/core/"; export const SelectionList: interface SelectionList { actionArgs?: string | undefined; onUpdateClick: (e: any) =gt; void; onDeleteClick: (e: any) =gt; void; onDetailsClick: (e: any) =gt; void; action: string; name?: string; identifier?: string; classes: { button_basic: string; formControl: string; selectionCard: string; }; } React.FClt;SelectionListgt; = ( props ) =gt; { const itemListCollapseKey = props.action "-itemlist-collapse"; const [collapseStates, setCollapseStates] = useState({ [itemListCollapseKey]: false, }); const dispatch = useDispatch(); const handleExpandClick = ( event: React.MouseEventlt;HTMLDivElement, MouseEventgt;, key: string ) =gt; { setCollapseStates({ ...collapseStates, [key]: !collapseStates[key], }); }; const listItems = ( key: React.Key | null | undefined, content: SelectionList | undefined | string, element: SelectionList ) =gt; { return ( lt;MenuItem key={key} selected={isElementSelected(element)} button onClick={(event) =gt; { selectElement(element); }} gt; lt;ListItemText primary={content} key={key "-litext"}gt;lt;/ListItemTextgt; lt;ListItemSecondaryAction // p={1} gt; lt;IconButton onClick={(e) =gt; handleDetailsClick(e, element)} aria-label="details" gt; lt;/IconButtongt; lt;/ListItemSecondaryActiongt; lt;/MenuItemgt; ); }; let childList: React.ReactElement | string = ""; if (data amp;amp; data.length gt; 0) { childList = ( lt;Collapse key={itemListCollapseKey} in={collapseStates[itemListCollapseKey]} unmountOnExit gt; {data.map((el) =gt; ( lt;List key={keyFromEl(el) "sublist"}gt; {listItems(keyFromEl(el), el.name, el)} lt;/Listgt; ))} lt;/Collapsegt; ); } return ( lt;List component="div" data-testid="SelectionListt"gt; lt;ListItem key={props.action "-header"} button onClick={(event) =gt; { handleExpandClick(event, itemListCollapseKey); }} gt; click me lt;/ListItemgt; {childList} lt;/Listgt; ); }; Мое тестирование:
import "@testing-library/jest-dom/extend-expect"; function handleUpdateClick(event: any, type = "") {} test("test", () =gt; { render( lt;Provider store={store}gt; lt;SelectionList classes={{ button_basic: "", formControl: "", selectionCard: "" }} action={"cameras"} actionArgs={""} onUpdateClick={handleUpdateClick} onDeleteClick={handleUpdateClick} onDetailsClick={handleUpdateClick} /gt; lt;/Providergt; ); const SelectionCardElement = screen.getByTestId("SelectionListt"); expect(SelectionCardElement).toBeInTheDocument(); }); Комментарии:
1. любое предложение/помощь приветствуется
Ответ №1:
Я бы посоветовал вам рассматривать компоненты как отдельные тестируемые единицы. Так что, когда вы тестируете ListItem — вы тестируете всю ListItem функциональность. Затем, когда вы тестируете свой SelectionList — вы имитируете ListItem компонент и только проверяете всю SelectionList функциональность.
Затем вы проверите, как эти два компонента интегрируются друг с другом, создав интеграционные тесты, которые фокусируются не на реализации, а на том, что отображается на странице, что пользователь действительно может видеть.
Обновить
Я имею в виду (в псевдокоде):
// ListItem.spec.jsx it.todo("list item renders"); it("list item triggers click callback when clicked", () =gt; { const onClickCallback = jest.fn(); const elem = render(lt;ListItem onClick={onClickCallback} /gt;); elem.click(); expect(onClickCallback).toHaveBeenCalledTimes(1); }); и
// SelectionList it.todo("selection list renders"); Что касается того, как вы издеваетесь, самым простым способом было бы сделать что-то вроде этого:
lt;SelectionList listItemComponent={ListItem} /gt; или
lt;SelectionList listItemComponent={lt;ListItem props="bla"/gt;} /gt; и т.д.
Комментарии:
1. не могли бы вы привести рабочий пример моего кода? Как можно издеваться над lt;ListItemgt;? чтобы знать, что происходит, когда его нажимают
2. смотрите обновление, пожалуйста
3. не могли бы вы добавить все необходимое в код, чтобы его можно было скопировать, вставить и попробовать ? например lt;Магазин поставщика={магазин}gt;lt;Магазин поставщика={магазин}gt;lt;/Поставщикgt; ? что такое «listItemComponent», что должно быть вместо него ?
4. это новая опора, которую вы можете добавить, и, к сожалению, я не могу предоставить полное решение
5. не могли бы вы показать, как добавить listItemComponent, теперь я получаю «Свойство» listItemComponent «не существует в типе» Встроенные атрибуты и опуститьlt;Список выбора, никогдаgt;».ts(2322)»