Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 <p>theme: gaia class:</p>

2 <ul><li>lead</li>

3 <li>invert paginate: true</li>

4 </ul><h2>Dom Testing Library</h2>

5 <h2>Hexlet</h2>

6 <h2>Экосистема Testing Library</h2>

7 <ul><li>dom testing library - основная библиотека</li>

8 <li>user-event - имитация браузерных событий</li>

9 <li>jest-dom - кастомные матчеры Jest</li>

10 <li>eslint-plugin-testing-library - плагин ESLint для Testing Library</li>

11 <li>eslint-plugin-jest-dom - плагин ESLint для Jest DOM</li>

12 <li>Версии для фреймворков<ul><li>react testing library</li>

13 <li>angular testing library</li>

14 <li>svelte testing library</li>

15 </ul></li>

16 </ul><h2>Ключевой руководящий принцип</h2>

17 <p>Чем лучше ваши тесты имитируют реальное использование вашего приложения, тем больше уверенности они могут вам дать</p>

18 <ul><li>тестируйте UI компоненты с точки зрения пользователя</li>

19 <li>избегайте проверки деталей реализации</li>

20 <li>не полагайтесь на конкретный фреймворк для тестирования</li>

21 <li>не используйте test runner</li>

22 <li>DOM Testing Library работает с любым окружением, где есть DOM API<ul><li>Jest, Mocha</li>

23 <li>JSDOM</li>

24 <li>реальный браузер</li>

25 </ul></li>

26 </ul><h2>Запросы</h2>

27 <ul><li>get, getAll</li>

28 <li>query, queryAll</li>

29 <li>find, findAll</li>

30 </ul><h2>ByRole</h2>

31 <ul><li>Селектор элементов по роли</li>

32 <li>getByRole, getAllByRole</li>

33 <li>queryByRole queryAllByRole</li>

34 <li>findByRole, findAllByRole</li>

35 <li>Доступные роли: link, button, form, heading, document, img, checkbox, radio, listitem, main, navigation, table, textbox</li>

36 <li>getByRole(expectedRole, { name: /submit/i })</li>

37 <li>getByRole('checkbox', { checked: true })</li>

38 <li>getAllByRole('button', { hidden: true })</li>

39 </ul><h2>ByText</h2>

40 <h2>TextMatch</h2>

41 <ul><li>как строка<ul><li>screen.getByText("Hello World") - поиск по полной строке</li>

42 <li>screen.getByText('llo worl', { exact: false }) - поиск по подстроке, игнорируется регистр</li>

43 </ul></li>

44 <li>как регулярное выражение<ul><li>screen.getByText(/world/i) - поиск по подстроке, игнорируется регистр</li>

45 <li>screen.getByText(/^hello world$/i) - поиск по полной строке, игнорируется регистр</li>

46 </ul></li>

47 <li>как функция<ul><li>screen.getByText((content, element) => content.startsWith("Hello"))</li>

48 </ul></li>

49 </ul><ul><li>screen.getByLabelText('Username') ищет элемент с соответствющим label</li>

50 <li>getByLabelText хорошо подходит для полей формы</li>

51 <li>getByPlaceholderText ищет по атрибуту placeholder</li>

52 <li>getByTitle ищет по атрибуту title</li>

53 </ul><h2>ByTestId</h2>

54 <ul><li>configure({testIdAttribute: 'data-my-test-attribute'})</li>

55 </ul><p>Расширение для браузеров Chrome и Firefox Testing Playground</p>

56 <h2>Вызов событий</h2>

57 <p>fireEvent(node: HTMLElement, event: Event)</p>

58 <p>fireEvent[eventName](node: HTMLElement, eventProperties: Object)</p>

59 <h2>Асинхронность</h2>

60 <p><strong>findBy = getBy + waitFor</strong></p>

61 <h2>waitFor</h2>

62 <ul><li><p>await waitFor(() => screen.getByRole('alert'))</p>

63 </li>

64 <li><p>await waitFor(() => expect(mockAPI).toHaveBeenCalledTimes(1))</p>

65 </li>

66 <li><p>WaitForElementToBeRemoved</p>

67 </li>

68 <li><p>wrapper on waitFor</p>

69 </li>

70 </ul><ul><li>fireEvent подходит для большинства сценариев, НО</li>

71 <li>fireEvent.click не порождает другие события:<ul><li>fireEvent.mouseOver(element)</li>

72 <li>fireEvent.mouseMove(element)</li>

73 <li>fireEvent.mouseDown(element)</li>

74 <li>element.focus() (если элемент допускает это)</li>

75 <li>fireEvent.mouseUp(element)</li>

76 <li>fireEvent.click(element)</li>

77 </ul></li>

78 </ul><h2>Рефакторинг</h2>

79 <h2>user-event</h2>

80 <p>Это вспомогательная библиотека для Testing Library, которая обеспечивает более совершенное моделирование взаимодействия с браузером, чем встроенный метод fireEvent</p>

81 <h2>user-event API</h2>

82 <ul><li>click / dbclick</li>

83 <li>hover / unhover</li>

84 <li>type</li>

85 <li>upload</li>

86 <li>selectOptions / deselectOptions</li>

87 <li>tab</li>

88 <li>paste</li>

89 </ul><h2>Click</h2>

90 <p>click(element, eventInit, options)</p>

91 <p>Клики по элементу, могут иметь различные побочные эффекты в зависимости от элемента</p>

92 <ul><li>Клик вызовет сначала событие hover Его можно отключить установивtrue для параметра skipHover</li>

93 <li>Можно также вызывать клик с зажатыми клавишаи, ctrlClick / shiftClick / пр.<ul><li>userEvent.click(elem, { ctrlKey: true, shiftKey: true })</li>

94 </ul></li>

95 </ul>