From 4430c7c0328a859aa002dff70ea8ffa57908df99 Mon Sep 17 00:00:00 2001
From: sipayrt <sipayrt@yandex.ru>
Date: Wed, 26 Jun 2024 22:38:34 +0300
Subject: [PATCH] docs: fix component testing example

---
 blog/component-testing.mdx | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

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 (
         <div id="root">
-            <h1>Testplane Component Testing</h1>
+            <h1>Testplane Component Testing!</h1>
             <button onClick={() => setCount(count => count + 1)}>count is {count}</button>
         </div>
     );
 }
 
+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(<Component />); // рендерим компонент на сгенеренной странице 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` в тесте/компоненте и затем увидеть результат его выполнения в терминале. Это также довольно удобно при дебаге теста.