diff --git a/blog/component-testing.mdx b/blog/component-testing.mdx index 015ad70..1d21dfe 100644 --- a/blog/component-testing.mdx +++ b/blog/component-testing.mdx @@ -108,12 +108,11 @@ it("should log document", async () => { } ``` -Напишем более сложный тест с рендерингом react компонента: +Напишем более сложный тест с рендерингом react компонента. Для этого сначала напишем небольшой компонент: ```javascript -// src/tests/test.testplane.tsx +// src/components/Component.tsx import { useState } from "react"; -import { render } from "@testing-library/react"; // Простой компонент с тайтлом и кнопкой-счетчиком function Component() { @@ -121,12 +120,22 @@ function Component() { return (
-

Testplane Component Testing

+

Testplane Component Testing!

); } +export default Component; +``` + +И напишем сам тест, который будет тестировать наш React-компонент: + +```javascript +// src/tests/test.testplane.tsx +import { render } from "@testing-library/react"; +import Component from "../components/Component"; + it("should render react button", async ({ browser }) => { render(); // рендерим компонент на сгенеренной странице Vite @@ -149,17 +158,17 @@ it("should render react button", async ({ browser }) => { ### Какие дополнительные возможности поддерживаются? -#### Hot Module Replacement (HMR) +#### 1. Hot Module Replacement (HMR) В Vite поддерживается [HMR](https://vitejs.dev/guide/api-hmr.html). Это означает, что если изменить загруженный файл, то произойдет или ремаунт компонента, или полная перезагрузка страницы. В случае, если компонент описан в отдельном файле (т.е. не в одном файле с тестом), то будет выполнен ремаунт, но тест перезапущен не будет. А если изменить файл с тестом, то произойдет перезагрузка страницы, которая приведет к тому, что Testplane прервет выполнение текущего теста и запустит его заново. За счет такой возможности в Vite можно очень быстро разрабатывать компоненты и писать для них тесты. Рекомендуется использовать вместе с REPL-режимом. При изменении исходников компонента не происходит полного перезапуска теста (маунтится по новой только сам компонент). При этом, если изменить код теста, то происходит полный перезапуск. -#### Использование инстанса browser и expect прямо в DevTools браузера +#### 2. Использование инстанса browser и expect прямо в DevTools браузера В консоли браузера, в котором выполняется тест, доступны инстанс самого `browser` и инстанс `expect`. Это довольно удобно использовать при дебаге теста. -#### Логи из консоли браузера в терминале +#### 3. Логи из консоли браузера в терминале Вызов команд `log`, `info`, `warn`, `error`, `debug` и `table` на объекте `console` в браузере приводят к тому, что отображается информация не только в DevTools браузера, но также и в терминале, из которого был запущен Testplane. Т.е. можно вызвать `console.log` в тесте/компоненте и затем увидеть результат его выполнения в терминале. Это также довольно удобно при дебаге теста.