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` в тесте/компоненте и затем увидеть результат его выполнения в терминале. Это также довольно удобно при дебаге теста.