{"componentChunkName":"component---src-templates-docs-js","path":"/docs/testing-recipes.html","result":{"data":{"markdownRemark":{"html":"

Общие принципы написания тестов React-компонентов.

\n
\n

Примечание:

\n

Эта страница предполагает, что вы используете исполнитель тестов Jest. Если это не так, то вам возможно придётся подстроиться под API, но в целом общий подход к написанию тестов будет таким же. Подробнее о настройке среды тестирования читайте на странице Среды тестирования.

\n
\n

На этой странице, в основном, мы будем использовать функциональные компоненты. Тем не менее, стратегии тестирования не зависят от внутренней реализации и могут применяться к классовым компонентам.

\n\n
\n

Подготовка/Завершение

\n

Для каждого теста мы обычно хотим рендерить React-дерево к DOM-элементу, который прикреплён к document. Это важно, чтобы он мог получать DOM-события. Когда тест завершается, мы хотим «подчистить» и размонтировать дерево от document.

\n

Обычно, чтобы это сделать, следует использовать пару блоков beforeEach и afterEach, они всегда будут исполняться и изолировать тесты друг от друга:

\n
import { unmountComponentAtNode } from \"react-dom\";\n\nlet container = null;\nbeforeEach(() => {\n  // подготавливаем DOM-элемент, куда будем рендерить\n  container = document.createElement(\"div\");\n  document.body.appendChild(container);\n});\n\nafterEach(() => {\n  // подчищаем после завершения\n  unmountComponentAtNode(container);\n  container.remove();\n  container = null;\n});
\n

Вы можете использовать другой подход, но не забывайте, что желательно «подчищать» даже если тест не проходит. В противном случае тесты могут «течь», и один тест может изменить поведение другого. Это сделает тесты сложными для отладки.

\n
\n

act()

\n

При написании UI-тестов, задачи рендеринга, пользовательских событий или получения данных могут расцениваться, как «блоки» интеграции с пользовательским интерфейсом. В пакете react-dom/test-utils есть вспомогательная функция act(), которая проверяет, что все обновления, связанные с этими «блоками», выполнены и применены к DOM до проверки предполагаемого вывода:

\n
act(() => {\n  // рендер компонентов\n});\n// проверка предполагаемого вывода
\n

Это помогает приблизить ваши тесты к тому, что реальные пользователи могли бы испытывать при использовании вашего приложения. Дальнейшие примеры используют act(), чтобы обеспечить это.

\n

Если вы считаете, что использование act() потребует писать больше шаблонного кода, то чтобы частично этого избежать, вы можете использовать библиотеку React Testing Library, вспомогательные функции которой уже обёрнуты в act().

\n
\n

Примечание:

\n

Имя функции act произошло от шаблона Arrange-Act-Assert.

\n
\n
\n

Рендеринг

\n

Как правило, вы хотите проверить правильность результата рендеринга компонента с определёнными пропсами. Рассмотрим простой компонент, который рендерит сообщение на основе пропа:

\n
// hello.js\n\nimport React from \"react\";\n\nexport default function Hello(props) {\n  if (props.name) {\n    return <h1>Hello, {props.name}!</h1>;\n  } else {\n    return <span>Hey, stranger</span>;\n  }\n}
\n

Давайте напишем тест для этого компонента:

\n
// hello.test.js\n\nimport React from \"react\";\nimport { render, unmountComponentAtNode } from \"react-dom\";\nimport { act } from \"react-dom/test-utils\";\n\nimport Hello from \"./hello\";\n\nlet container = null;\nbeforeEach(() => {\n  // подготавливаем DOM-элемент, куда будем рендерить\n  container = document.createElement(\"div\");\n  document.body.appendChild(container);\n});\n\nafterEach(() => {\n  // подчищаем после завершения\n  unmountComponentAtNode(container);\n  container.remove();\n  container = null;\n});\n\nit(\"renders with or without a name\", () => {\n  act(() => {    render(<Hello />, container);  });  expect(container.textContent).toBe(\"Hey, stranger\");\n  act(() => {\n    render(<Hello name=\"Jenny\" />, container);\n  });\n  expect(container.textContent).toBe(\"Hello, Jenny!\");\n\n  act(() => {\n    render(<Hello name=\"Margaret\" />, container);\n  });\n  expect(container.textContent).toBe(\"Hello, Margaret!\");\n});
\n
\n

Получение данных

\n

Вместо обращения к реальным API в своих тестах, вы можете делать фиктивные запросы, которые вернут подставные данные. Такие запросы предотвращают проблемы в тестах, связанные с недоступностью бэкенда, и увеличивают скорость их выполнения. Примечание: вы всё ещё можете запускать набор «сквозных» тестов через фреймворк, которые проверяют, как работает приложение в целом.

\n
// user.js\n\nimport React, { useState, useEffect } from \"react\";\n\nexport default function User(props) {\n  const [user, setUser] = useState(null);\n\n  async function fetchUserData(id) {\n    const response = await fetch(\"/\" + id);\n    setUser(await response.json());\n  }\n\n  useEffect(() => {\n    fetchUserData(props.id);\n  }, [props.id]);\n\n  if (!user) {\n    return \"loading...\";\n  }\n\n  return (\n    <details>\n      <summary>{user.name}</summary>\n      <strong>{user.age}</strong> years old\n      <br />\n      lives in {user.address}\n    </details>\n  );\n}
\n

Давайте напишем тесты для этого компонента:

\n
// user.test.js\n\nimport React from \"react\";\nimport { render, unmountComponentAtNode } from \"react-dom\";\nimport { act } from \"react-dom/test-utils\";\nimport User from \"./user\";\n\nlet container = null;\nbeforeEach(() => {\n  // подготавливаем DOM-элемент, куда будем рендерить\n  container = document.createElement(\"div\");\n  document.body.appendChild(container);\n});\n\nafterEach(() => {\n  // подчищаем после завершения\n  unmountComponentAtNode(container);\n  container.remove();\n  container = null;\n});\n\nit(\"renders user data\", async () => {\n  const fakeUser = {    name: \"Joni Baez\",    age: \"32\",    address: \"123, Charming Avenue\"  };  jest.spyOn(global, \"fetch\").mockImplementation(() =>    Promise.resolve({      json: () => Promise.resolve(fakeUser)    })  );\n  // Используем act асинхронно, чтобы передать успешно завершённые промисы\n  await act(async () => {\n    render(<User id=\"123\" />, container);\n  });\n\n  expect(container.querySelector(\"summary\").textContent).toBe(fakeUser.name);\n  expect(container.querySelector(\"strong\").textContent).toBe(fakeUser.age);\n  expect(container.textContent).toContain(fakeUser.address);\n\n  // выключаем фиктивный fetch, чтобы убедиться, что тесты полностью изолированы  global.fetch.mockRestore();});
\n
\n

Фиктивные модули

\n

Некоторые модули могут неправильно работать внутри тестовой среды или совсем не нужны для теста. Подмена таких модулей фиктивными облегчит написание тестов для вашего кода.

\n

Рассмотрим компонент Contact, который использует сторонний компонент GoogleMap:

\n
// map.js\n\nimport React from \"react\";\n\nimport { LoadScript, GoogleMap } from \"react-google-maps\";\nexport default function Map(props) {\n  return (\n    <LoadScript id=\"script-loader\" googleMapsApiKey=\"YOUR_API_KEY\">\n      <GoogleMap id=\"example-map\" center={props.center} />\n    </LoadScript>\n  );\n}\n\n// contact.js\n\nimport React from \"react\";\nimport Map from \"./map\";\n\nexport default function Contact(props) {\n  return (\n    <div>\n      <address>\n        Contact {props.name} via{\" \"}\n        <a data-testid=\"email\" href={\"mailto:\" + props.email}>\n          email\n        </a>\n        or on their <a data-testid=\"site\" href={props.site}>\n          website\n        </a>.\n      </address>\n      <Map center={props.center} />\n    </div>\n  );\n}
\n

Если мы не хотим загружать этот компонент в наш тест, мы можем подменить его фиктивным и запустить наши тесты:

\n
// contact.test.js\n\nimport React from \"react\";\nimport { render, unmountComponentAtNode } from \"react-dom\";\nimport { act } from \"react-dom/test-utils\";\n\nimport Contact from \"./contact\";\nimport MockedMap from \"./map\";\n\njest.mock(\"./map\", () => {  return function DummyMap(props) {    return (      <div data-testid=\"map\">        {props.center.lat}:{props.center.long}      </div>    );  };});\nlet container = null;\nbeforeEach(() => {\n  // подготавливаем DOM-элемент, куда будем рендерить\n  container = document.createElement(\"div\");\n  document.body.appendChild(container);\n});\n\nafterEach(() => {\n  // подчищаем после завершения\n  unmountComponentAtNode(container);\n  container.remove();\n  container = null;\n});\n\nit(\"should render contact information\", () => {\n  const center = { lat: 0, long: 0 };\n  act(() => {\n    render(\n      <Contact\n        name=\"Joni Baez\"\n        email=\"test@example.com\"\n        site=\"http://test.com\"\n        center={center}\n      />,\n      container\n    );\n  });\n\n  expect(\n    container.querySelector(\"[data-testid='email']\").getAttribute(\"href\")\n  ).toEqual(\"mailto:test@example.com\");\n\n  expect(\n    container.querySelector('[data-testid=\"site\"]').getAttribute(\"href\")\n  ).toEqual(\"http://test.com\");\n\n  expect(container.querySelector('[data-testid=\"map\"]').textContent).toEqual(\n    \"0:0\"\n  );\n});
\n
\n

События

\n

Мы рекомендуем создавать настоящие DOM-события на DOM-элементах и после проверять предполагаемый результат. Рассмотрим компонент Toggle:

\n
// toggle.js\n\nimport React, { useState } from \"react\";\n\nexport default function Toggle(props) {\n  const [state, setState] = useState(false);\n  return (\n    <button\n      onClick={() => {\n        setState(previousState => !previousState);\n        props.onChange(!state);\n      }}\n      data-testid=\"toggle\"\n    >\n      {state === true ? \"Turn off\" : \"Turn on\"}\n    </button>\n  );\n}
\n

Давайте напишем тесты для этого компонента:

\n
// toggle.test.js\n\nimport React from \"react\";\nimport { render, unmountComponentAtNode } from \"react-dom\";\nimport { act } from \"react-dom/test-utils\";\n\nimport Toggle from \"./toggle\";\n\nlet container = null;\nbeforeEach(() => {\n  // подготавливаем DOM-элемент, куда будем рендерить\n  container = document.createElement(\"div\");\n  // container *обязан* быть прикреплен к document, чтобы события работали правильно.  document.body.appendChild(container);});\n\nafterEach(() => {\n  // подчищаем после завершения\n  unmountComponentAtNode(container);\n  container.remove();\n  container = null;\n});\n\nit(\"changes value when clicked\", () => {\n  const onChange = jest.fn();\n  act(() => {\n    render(<Toggle onChange={onChange} />, container);\n  });\n\n  // получаем элемент button и кликаем на него несколько раз\n  const button = document.querySelector(\"[data-testid=toggle]\");\n  expect(button.innerHTML).toBe(\"Turn on\");\n\n  act(() => {\n    button.dispatchEvent(new MouseEvent(\"click\", { bubbles: true }));  });\n\n  expect(onChange).toHaveBeenCalledTimes(1);\n  expect(button.innerHTML).toBe(\"Turn off\");\n\n  act(() => {\n    for (let i = 0; i < 5; i++) {\n      button.dispatchEvent(new MouseEvent(\"click\", { bubbles: true }));    }\n  });\n\n  expect(onChange).toHaveBeenCalledTimes(6);\n  expect(button.innerHTML).toBe(\"Turn on\");\n});
\n

Разные DOM-события и их свойства описаны на MDN. Обратите внимание, нужно передавать { bubbles: true } в каждое событие, которое вы создаёте, чтобы обработчик событий React его увидел и автоматически передал в document.

\n
\n

Примечание:

\n

React Testing Library предлагает лаконичный вариант вспомогательной функции для запуска событий.

\n
\n
\n

Таймеры

\n

Ваш код может использовать таймеры, например setTimeout, чтобы запланировать дополнительные действия в будущем. В следующем примере панель множественного выбора ждёт выбора пользователя и выполняет дальнейшие действия, если выбор не сделан в течение 5 секунд:

\n
// card.js\n\nimport React, { useEffect } from \"react\";\n\nexport default function Card(props) {\n  useEffect(() => {\n    const timeoutID = setTimeout(() => {\n      props.onSelect(null);\n    }, 5000);\n    return () => {\n      clearTimeout(timeoutID);\n    };\n  }, [props.onSelect]);\n\n  return [1, 2, 3, 4].map(choice => (\n    <button\n      key={choice}\n      data-testid={choice}\n      onClick={() => props.onSelect(choice)}\n    >\n      {choice}\n    </button>\n  ));\n}
\n

Давайте напишем тесты для этого компонента, используя фиктивные таймеры Jest, и протестируем различные состояния, в которых он может быть.

\n
// card.test.js\n\nimport React from \"react\";\nimport { render, unmountComponentAtNode } from \"react-dom\";\nimport { act } from \"react-dom/test-utils\";\n\nimport Card from \"./card\";\njest.useFakeTimers();\n\nlet container = null;\nbeforeEach(() => {\n  // подготавливаем DOM-элемент, куда будем рендерить\n  container = document.createElement(\"div\");\n  document.body.appendChild(container);\n});\n\nafterEach(() => {\n  // подчищаем после завершения\n  unmountComponentAtNode(container);\n  container.remove();\n  container = null;\n});\n\nit(\"should select null after timing out\", () => {\n  const onSelect = jest.fn();\n  act(() => {\n    render(<Card onSelect={onSelect} />, container);\n  });\n\n  // двигаемся вперёд во времени на 100 мс  act(() => {\n    jest.advanceTimersByTime(100);\n  });\n  expect(onSelect).not.toHaveBeenCalled();\n\n  // теперь двигаемся вперёд ещё на 5 секунд  act(() => {\n    jest.advanceTimersByTime(5000);\n  });\n  expect(onSelect).toHaveBeenCalledWith(null);\n});\n\nit(\"should cleanup on being removed\", () => {\n  const onSelect = jest.fn();\n  act(() => {\n    render(<Card onSelect={onSelect} />, container);\n  });\n  act(() => {\n    jest.advanceTimersByTime(100);\n  });\n  expect(onSelect).not.toHaveBeenCalled();\n\n  // размонтируем приложение\n  act(() => {\n    render(null, container);\n  });\n  act(() => {\n    jest.advanceTimersByTime(5000);\n  });\n  expect(onSelect).not.toHaveBeenCalled();\n});\n\nit(\"should accept selections\", () => {\n  const onSelect = jest.fn();\n  act(() => {\n    render(<Card onSelect={onSelect} />, container);\n  });\n\n  act(() => {\n    container\n      .querySelector(\"[data-testid='2']\")\n      .dispatchEvent(new MouseEvent(\"click\", { bubbles: true }));\n  });\n\n  expect(onSelect).toHaveBeenCalledWith(2);\n});
\n

Необязательно использовать фиктивные таймеры во всех тестах. В тесте выше, мы включили их вызвав метод jest.useFakeTimers(). Главное их преимущество состоит в том, что вашему тесту не требуется ждать пять секунд для выполнения, а вам усложнять код компонента только для проведения тестирования.

\n
\n

Тестирование снимками

\n

Фреймворки, такие как Jest, позволяют сохранять «снимки» данных используя toMatchSnapshot / toMatchInlineSnapshot. С их помощью мы можем «сохранить» результат рендера компонента и убедиться, что изменение в нём явно отражено в снимке.

\n

В следующем примере мы рендерим компонент и форматируем отрендеренный HTML, используя пакет pretty, перед его сохранением в виде встроенного снимка:

\n
// hello.test.js\n\nimport React from \"react\";\nimport { render, unmountComponentAtNode } from \"react-dom\";\nimport { act } from \"react-dom/test-utils\";\nimport pretty from \"pretty\";\n\nimport Hello from \"./hello\";\n\nlet container = null;\nbeforeEach(() => {\n  // подготавливаем DOM-элемент, куда будем рендерить\n  container = document.createElement(\"div\");\n  document.body.appendChild(container);\n});\n\nafterEach(() => {\n  // подчищаем после завершения\n  unmountComponentAtNode(container);\n  container.remove();\n  container = null;\n});\n\nit(\"should render a greeting\", () => {\n  act(() => {\n    render(<Hello />, container);\n  });\n\n  expect(    pretty(container.innerHTML)  ).toMatchInlineSnapshot(); /* ... автоматически заполняется Jest ... */\n  act(() => {\n    render(<Hello name=\"Jenny\" />, container);\n  });\n\n  expect(\n    pretty(container.innerHTML)\n  ).toMatchInlineSnapshot(); /* ... автоматически заполняется Jest ... */\n\n  act(() => {\n    render(<Hello name=\"Margaret\" />, container);\n  });\n\n  expect(\n    pretty(container.innerHTML)\n  ).toMatchInlineSnapshot(); /* ... автоматически заполняется Jest ... */\n});
\n

В большинстве случаев лучше проверять специфические вероятные результаты, чем использовать снимки. Этот тип тестов опирается на внутреннюю реализацию компонентов, в результате тесты легко ломаются и команды начинают уделять меньше внимания поломкам в снимках. Выборочная подмена дочерних компонентов поможет снизить размер снимков и сделает их код более читаемым для коллег.

\n
\n

Несколько рендереров

\n

В редких случаях вы можете запустить тест компонента, который использует несколько рендереров. Например, можно запускать тесты снимками для компонента с помощью react-test-renderer, который использует ReactDOM.render внутри дочернего компонента для рендера некоторого содержимого. В этом случае можно обернуть обновления функциями act() в соответствии с их рендерами.

\n
import { act as domAct } from \"react-dom/test-utils\";\nimport { act as testAct, create } from \"react-test-renderer\";\n// ...\nlet root;\ndomAct(() => {\n  testAct(() => {\n    root = create(<App />);\n  });\n});\nexpect(root).toMatchSnapshot();
\n
\n

Чего-то не хватает?

\n

Если мы упустили какой-то распространённый сценарий, пожалуйста, сообщите нам в ишью-трекере сайта с документацией.

","frontmatter":{"title":"Рецепты тестирования","next":"testing-environments.html","prev":"testing.html"},"fields":{"path":"content/docs/testing-recipes.md","slug":"docs/testing-recipes.html"}}},"pageContext":{"slug":"docs/testing-recipes.html"}},"staticQueryHashes":[]}