From 5d88346ae6e19b81b022c0038da268ad8c5dd2cc Mon Sep 17 00:00:00 2001
From: DudaGod <dudkevich@yandex-team.ru>
Date: Thu, 8 Aug 2024 13:43:24 +0300
Subject: [PATCH] docs: describe component testing guide

---
 blog/component-testing.mdx                    | 136 +-------------
 docs/guides/component-testing.mdx             | 176 ++++++++++++++++++
 .../component-testing.mdx                     | 136 +-------------
 .../current/config/system.mdx                 |  36 ++++
 .../current/guides/component-testing.mdx      | 176 ++++++++++++++++++
 5 files changed, 394 insertions(+), 266 deletions(-)
 create mode 100644 docs/guides/component-testing.mdx
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/guides/component-testing.mdx

diff --git a/blog/component-testing.mdx b/blog/component-testing.mdx
index 6234beb..b12fe0b 100644
--- a/blog/component-testing.mdx
+++ b/blog/component-testing.mdx
@@ -38,139 +38,7 @@ import Admonition from "@theme/Admonition";
 
 ### Как использовать?
 
-Будем настраивать тестирование react-компонентов, написанных на TypeScript. Поэтому, для начала установим необходимые зависимости:
-
-```bash
-npm i testplane vite @vitejs/plugin-react @testing-library/react --save-dev
-npm i react --save
-```
-
-Создаем Vite конфиг, в котором подключим плагин для поддержки React. Пример:
-
-```javascript
-// vite.config.ts
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-
-export default defineConfig({
-    plugins: [react()],
-});
-```
-
-Теперь настроим запуск тестов в браузере. Для этого укажем опцию [testRunEnv](https://github.com/gemini-testing/testplane/blob/master/docs/config.md#testrunenv). Пример:
-
-```javascript
-// .testplane.conf.ts
-export const {
-    // ...
-    system: {
-        // ...
-        testRunEnv: ['browser', { viteConfig: './vite.config.ts' }],
-    },
-    sets: {
-        linux: {
-            files: [
-                'src/tests/**/*.testplane.tsx'
-            ],
-            browsers: [
-                'chrome'
-            ]
-        },
-    },
-}
-```
-
-После чего можем написать тест, в котором просто выведем значение `document` в консоль без использования команды [browser.execute](/docs/v8/commands/browser/execute):
-
-```javascript
-// src/tests/test.testplane.tsx
-it("should log document", async () => {
-    console.log(document);
-});
-```
-
-Если бы такой тест выполнялся в окружении Node.js, то он бы упал с ошибкой `ReferenceError: document is not defined`. Но в нашем случае он будет выполнен прямо в браузере, где доступна глобальная переменная `document`. Поэтому, в логе браузера и терминала (про эту возможность расскажем ниже) мы увидим следующее:
-
-```
-{
-  location: {
-    ancestorOrigins: {},
-    href: 'http://localhost:56292/run-uuids/23d2af81-4259-425c-8214-c9e770d75ea4',
-    origin: 'http://localhost:56292',
-    protocol: 'http:',
-    host: 'localhost:56292',
-    hostname: 'localhost',
-    port: '56292',
-    pathname: '/run-uuids/23d2af81-4259-425c-8214-c9e770d75ea4',
-    search: '',
-    hash: ''
-  }
-}
-```
-
-Напишем более сложный тест с рендерингом React-компонента. Для этого сначала напишем небольшой компонент:
-
-```javascript
-// src/components/Component.tsx
-import { useState } from "react";
-
-// Простой компонент с тайтлом и кнопкой-счетчиком
-function Component() {
-    const [count, setCount] = useState(0);
-
-    return (
-        <div id="root">
-            <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
-
-    const button = await browser.$("button");
-
-    await button.click();
-    await button.click();
-
-    await expect(button).toHaveText("count is 2");
-});
-```
-
-С полноценно работающими примерами можно ознакомиться [здесь](https://github.com/gemini-testing/testplane/tree/master/examples/component-testing).
-
-<Admonition type="warning" title="На данный момент есть ограничения">
-    - поддерживаются только компоненты, написанные на React в файлах `.jsx` и `.tsx`. Поддержка Vue
-    также есть в планах; - нет доступа к `currentTest` из хуков и теста; - временно не
-    поддерживается плагин @testplane/global-hook.
-</Admonition>
-
-### Какие дополнительные возможности поддерживаются?
-
-#### 1. Hot Module Replacement (HMR)
-
-В Vite поддерживается [HMR](https://vitejs.dev/guide/api-hmr.html). Это означает, что если изменить загруженный файл, то произойдет или ремаунт компонента, или полная перезагрузка страницы. В случае, если компонент описан в отдельном файле (т.е. не в одном файле с тестом), то будет выполнен ремаунт, но тест перезапущен не будет. А если изменить файл с тестом, то произойдет перезагрузка страницы, которая приведет к тому, что Testplane прервет выполнение текущего теста и запустит его заново. За счет такой возможности в Vite можно очень быстро разрабатывать компоненты и писать для них тесты. Рекомендуется использовать вместе с REPL-режимом.
-
-При изменении исходников компонента не происходит полного перезапуска теста (маунтится по новой только сам компонент). При этом, если изменить код теста, то происходит полный перезапуск.
-
-#### 2. Использование инстанса browser и expect прямо в DevTools браузера
-
-В консоли браузера, в котором выполняется тест, доступны инстанс самого `browser` и инстанс `expect`. Это довольно удобно использовать при дебаге теста.
-
-#### 3. Логи из консоли браузера в терминале
-
-Вызов команд `log`, `info`, `warn`, `error`, `debug` и `table` на объекте `console` в браузере приводят к тому, что отображается информация не только в DevTools браузера, но также и в терминале, из которого был запущен Testplane. Т.е. можно вызвать `console.log` в тесте/компоненте и затем увидеть результат его выполнения в терминале. Это также довольно удобно при дебаге теста.
+Узнайте больше об этом в нашей документации "[Компонентное тестирование][docs-component-testing]".
 
 ### Заключение
 
@@ -183,3 +51,5 @@ it("should render react button", async ({ browser }) => {
 -   отображение логов в терминале для повышения комфорта и увеличения скорости разработки.
 
 Переезжайте на Testplane и попробуйте новую возможность самостоятельно. В случае обнаружения проблем, приходите в [issue github](https://github.com/gemini-testing/testplane/issues) — мы вам обязательно поможем!
+
+[docs-component-testing]: ../../docs/component-testing.mdx
diff --git a/docs/guides/component-testing.mdx b/docs/guides/component-testing.mdx
new file mode 100644
index 0000000..5157027
--- /dev/null
+++ b/docs/guides/component-testing.mdx
@@ -0,0 +1,176 @@
+# Компонентное тестирование (экспериментальное)
+
+## Введение
+
+Узнайте больше об этом в нашем блоге "[Компонентное тестирование][blog-component-testing]".
+
+## Пример
+
+```(typescript)
+import { render } from '@testing-library/react';
+import Component from '../Component';
+
+it('should render react component', async ({browser}) => {
+    // Отрендерить компонент на изолированной странице
+    render(<Component />);
+
+    // Найти кнопку внутри компонента и кликнуть по ней
+    const button = await browser.$("button");
+    await button.click();
+
+    // Проверить, что текст кнопки имеет ожидаемое значение
+    await expect(button).toHaveText("count is 1");
+});
+```
+
+## Как начать?
+
+Давайте настроим тестирование реакт компонентов, написанных на Typescript.
+
+### Шаг 1: Установка Testplane и необходимых зависимостей
+
+```bash
+npm init testplane@latest
+npm i vite @vitejs/plugin-react @testing-library/react --save-dev
+npm i react --save
+```
+
+### Шаг 2: Создание конфигурации Vite и подключение плагина react
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+    plugins: [
+        react(),
+    ]
+});
+```
+
+### Шаг 3: Настройка запуска тестов в браузере (используя опцию testRunEnv)
+
+```typescript
+// .testplane.conf.ts
+export const {
+    // ...
+    system: {
+        // ...
+        testRunEnv: ['browser', { viteConfig: './vite.config.ts' }],
+    },
+    sets: {
+        linux: {
+            files: [
+                'src/tests/**/*.testplane.tsx'
+            ],
+            browsers: [
+                'chrome'
+            ]
+        },
+    },
+}
+```
+
+### Шаг 4: Написание теста
+
+Чтобы проверить правильную конфигурацию, мы можем написать самый простой тест, в котором выводим значение document в консоль без использования команды [browser.execute][browser-execute]:
+
+```typescript
+// src/tests/test.testplane.tsx
+it('should log document', async () => {
+    console.log(document);
+});
+```
+
+Если бы такой тест был выполнен в среде Node.js, то он упал бы с ошибкой: `ReferenceError: document is not defined`. Но в нашем случае он будет выполнен непосредственно в браузере, где глобальная переменная `document` доступна. Поэтому в консоли браузера и терминала мы увидим следующее:
+
+```
+{
+  location: {
+    ancestorOrigins: {},
+    href: 'http://localhost:56292/run-uuids/23d2af81-4259-425c-8214-c9e770d75ea4',
+    origin: 'http://localhost:56292',
+    protocol: 'http:',
+    host: 'localhost:56292',
+    hostname: 'localhost',
+    port: '56292',
+    pathname: '/run-uuids/23d2af81-4259-425c-8214-c9e770d75ea4',
+    search: '',
+    hash: ''
+  }
+}
+```
+
+Давайте напишем более сложный тест с рендером компонента:
+
+```typescript
+// src/tests/test.testplane.tsx
+import { render } from '@testing-library/react';
+import Component from '../Component';
+
+it('should render react component', async ({browser}) => {
+    // Отрендерить компонент на изолированной странице
+    render(<Component />);
+
+    // Найти кнопку внутри компонента и кликнуть по ней
+    const button = await browser.$("button");
+    await button.click();
+
+    // Проверить, что текст кнопки имеет ожидаемое значение
+    await expect(button).toHaveText("count is 1");
+});
+```
+
+И исходный код самого компонента:
+
+```typescript
+// src/Component.tsx
+import { useState } from 'react';
+
+// A simple component with a title and a counter button
+function Component() {
+    const [count, setCount] = useState(0);
+
+    return (
+        <div id="root">
+            <h1>Testplane Component Testing</h1>
+            <button onClick={() => setCount((count) => count + 1)}>
+                count is {count}
+            </button>
+        </div>
+    );
+}
+```
+
+Полностью работающие примеры можно найти [здесь][testplane-examples-component-testing].
+
+## Временные ограничения
+
+<Admonition type="warning">
+* поддерживаются только компоненты, написанные на React в файлах .jsx и .tsx. Возможность написания тестов в файлах .js будет реализована в ближайшем будущем. Мы также планируем поддержку фреймворка Vue;
+* нет доступа к currentTest из it, beforeEach и afterEach. Это будет добавлено в ближайшем будущем;
+* плагин [@testplane/global-hook][testplane-global-hook] в настоящее время временно не поддерживается.
+</Admonition>
+
+## Дополнительные возможности
+
+### Горячая замена модулей (HMR)
+
+[HMR][vite-hmr] поддерживается в Vite. Это означает, что если вы измените загруженный файл, либо компонент будет повторно монтироваться, либо страница будет полностью предварительно загружена. Если компонент описан в отдельном файле (т.е. не в том же файле, что и тест), произойдет повторная установка, но тест не будет перезапущен. А если вы измените файл теста, страница будет перезагружена, что заставит Testplane прервать выполнение текущего теста и запустить его заново. Благодаря этой функции вы можете быстро разрабатывать компоненты в Vite и писать для них тесты. Рекомендуется использовать ее вместе с [REPL режимом][repl-mode].
+
+### Использование экземпляров browser и expect напрямую в средствах разработчика браузера
+
+Инстансы `browser` и `expect` доступны в глобальной области видимости браузера. Это довольно удобно использовать при отладке теста.
+
+### Логи из консоли браузера в терминале
+
+Вызов команд `log`, `info`, `warn`, `error`, `debug` и `table` на объекте `console` в браузере приводит к отображению информации не только в средствах разработчика браузера, но также в терминале, из которого был запущен Testplane. То есть, вы можете вызывать `console.log` в тесте/компоненте и увидеть результат его выполнения в терминале. Это особенно удобно при отладке тестов.
+
+[blog-component-testing]: ../../blog/component-testing.mdx
+[test-run-env-option]: ../config/system.mdx#test_run_env
+[browser-execute]: ../commands/browser/execute.mdx
+[testplane-examples-component-testing]: https://github.com/gemini-testing/testplane/tree/master/examples/component-testing
+[testplane-global-hook]: https://github.com/gemini-testing/testplane-global-hook
+[vite-hmr]: https://vitejs.dev/guide/api-hmr.html
+[repl-mode]: ../cli.mdx#repl-mode
diff --git a/i18n/en/docusaurus-plugin-content-blog/component-testing.mdx b/i18n/en/docusaurus-plugin-content-blog/component-testing.mdx
index 7bc02cd..0a5d0db 100644
--- a/i18n/en/docusaurus-plugin-content-blog/component-testing.mdx
+++ b/i18n/en/docusaurus-plugin-content-blog/component-testing.mdx
@@ -38,139 +38,7 @@ We chose the option of using Vite because this approach provides testing of the
 
 ### How to use?
 
-We will set up testing of react components written in TypeScript. Therefore, first, we will install the necessary dependencies:
-
-```bash
-npm i testplane vite @vitejs/plugin-react @testing-library/react --save-dev
-npm i react --save
-```
-
-Create a Vite config in which we connect the plugin to support React. Example:
-
-```javascript
-// vite.config.ts
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-
-export default defineConfig({
-    plugins: [react()],
-});
-```
-
-Now we will set up running tests in the browser. To do this, we will specify the [testRunEnv](https://github.com/gemini-testing/testplane/blob/master/docs/config.md#testrunenv) option. Example:
-
-```javascript
-// .testplane.conf.ts
-export const {
-    // ...
-    system: {
-        // ...
-        testRunEnv: ['browser', { viteConfig: './vite.config.ts' }],
-    },
-    sets: {
-        linux: {
-            files: [
-                'src/tests/**/*.testplane.tsx'
-            ],
-            browsers: [
-                'chrome'
-            ]
-        },
-    },
-}
-```
-
-After that, we can write a test in which we simply output the value of `document` to the console without using the [browser.execute](/docs/v8/commands/browser/execute) command:
-
-```javascript
-// src/tests/test.testplane.tsx
-it("should log document", async () => {
-    console.log(document);
-});
-```
-
-If such a test were run in the Node.js environment, it would fail with the error `ReferenceError: document is not defined`. But in our case, it will be executed directly in the browser, where the global variable `document` is available. Therefore, in the browser log and terminal (we will talk about this feature below), we will see the following:
-
-```
-{
-  location: {
-    ancestorOrigins: {},
-    href: 'http://localhost:56292/run-uuids/23d2af81-4259-425c-8214-c9e770d75ea4',
-    origin: 'http://localhost:56292',
-    protocol: 'http:',
-    host: 'localhost:56292',
-    hostname: 'localhost',
-    port: '56292',
-    pathname: '/run-uuids/23d2af81-4259-425c-8214-c9e770d75ea4',
-    search: '',
-    hash: ''
-  }
-}
-```
-
-Let's write a more complex test with rendering a React component. To do this, first, we will write a small component:
-
-```javascript
-// src/components/Component.tsx
-import { useState } from "react";
-
-// Simple component with a title and a counter button
-function Component() {
-    const [count, setCount] = useState(0);
-
-    return (
-        <div id="root">
-            <h1>Testplane Component Testing!</h1>
-            <button onClick={() => setCount(count => count + 1)}>count is {count}</button>
-        </div>
-    );
-}
-
-export default Component;
-```
-
-And write the test itself, which will test our React component:
-
-```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 />); // render the component on the generated Vite page
-
-    const button = await browser.$("button");
-
-    await button.click();
-    await button.click();
-
-    await expect(button).toHaveText("count is 2");
-});
-```
-
-You can find fully working examples [here](https://github.com/gemini-testing/testplane/tree/master/examples/component-testing).
-
-<Admonition type="warning" title="Currently, there are limitations">
-    - only components written in React in `.jsx` and `.tsx` files are supported. Vue support is also
-    planned; - no access to `currentTest` from hooks and tests; - the @testplane/global-hook plugin
-    is temporarily not supported.
-</Admonition>
-
-### What additional features are supported?
-
-#### 1. Hot Module Replacement (HMR)
-
-Vite supports [HMR](https://vitejs.dev/guide/api-hmr.html). This means that if a loaded file is changed, either the component will be remounted, or the page will be fully reloaded. If the component is described in a separate file (i.e., not in the same file as the test), it will be remounted, but the test will not be restarted. And if the test file is changed, the page will be reloaded, which will cause Testplane to interrupt the current test and start it again. Thanks to this feature in Vite, you can very quickly develop components and write tests for them. It is recommended to use it together with the REPL mode.
-
-When changing the component's source code, the test is not fully restarted (only the component itself is remounted). However, if the test code is changed, a full restart occurs.
-
-#### 2. Using the browser instance and expect directly in the browser's DevTools
-
-In the browser console where the test is running, the `browser` instance and the `expect` instance are available. This is quite convenient to use when debugging the test.
-
-#### 3. Logs from the browser console in the terminal
-
-Calling the `log`, `info`, `warn`, `error`, `debug`, and `table` commands on the `console` object in the browser results in the information being displayed not only in the browser's DevTools but also in the terminal from which Testplane was launched. That is, you can call `console.log` in the test/component and then see the result of its execution in the terminal. This is also quite convenient when debugging the test.
+Read more about it in our documentation "[Component Testing][docs-component-testing]".
 
 ### Conclusion
 
@@ -183,3 +51,5 @@ This functionality provides our users with new capabilities:
 -   log display in the terminal to enhance comfort and speed up development.
 
 Switch to Testplane and try the new feature yourself. If you encounter any problems, come to the [issue github](https://github.com/gemini-testing/testplane/issues) — we will definitely help you!
+
+[docs-component-testing]: ../../docs/component-testing.mdx
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/config/system.mdx b/i18n/en/docusaurus-plugin-content-docs/current/config/system.mdx
index 0db22ae..1606bfc 100644
--- a/i18n/en/docusaurus-plugin-content-docs/current/config/system.mdx
+++ b/i18n/en/docusaurus-plugin-content-docs/current/config/system.mdx
@@ -66,6 +66,7 @@ module.exports = {
 <tr><td>[testsPerWorker](#tests_per_worker)</td><td>Number</td><td>Infinity</td><td>The maximum number of tests that will be run in a single subprocess before the subprocess is restarted.</td></tr>
 <tr><td>[parallelLimit](#parallel_limit)</td><td>Number</td><td>1</td><td>The maximum number of browsers that can be launched simultaneously.</td></tr>
 <tr><td>[fileExtensions](#file_extensions)</td><td>Array</td><td>`[.js]`</td><td>File extensions in which Testplane will look for tests to run.</td></tr>
+<tr><td>[testRunEnv](#test_run_env)</td><td>"nodejs" or "browser" or Array</td><td>`nodejs`</td><td>Ability to specify in which environment the tests should be run.</td></tr>
 
 </tbody>
 </table>
@@ -160,4 +161,39 @@ By default, Testplane runs all browsers at the same time. Sometimes (for example
 
 File extensions in which Testplane will search on the file system for tests to run. By default: `[.js]`.
 
+### testRunEnv {#test_run_env}
+
+Ability to specify in which environment the tests should be run. There are two available environments:
+
+* `nodejs` – Testplane will run tests in nodejs process. Default value.
+* `browser` – Testplane will run tests inside of the browser.
+
+The `browser` environment has additional options:
+
+* `viteConfig` - ability to specify own [Vite configuration][vite-config]. You can pass relative path to the config file as `string`, object with [UserConfig][vite-user-config] type or function with `(env: ConfigEnv) => UserConfig | Promise<UserConfig>` type.
+
+```typescript
+// .testplane.conf.ts
+import viteConfig from './vite.config.ts';
+
+export const {
+    // ...
+    system: {
+        // ...
+        // as relative path to the config file
+        testRunEnv: ['browser', { viteConfig: './vite.config.ts' }],
+        // or use object with UserConfig type
+        testRunEnv: ['browser', { viteConfig }],
+        // or use function
+        testRunEnv: ['browser', {
+            viteConfig: (configEnv) => ({
+                // ...
+            })
+        }],
+    }
+}
+```
+
 [sauce-labs]: https://saucelabs.com
+[vite-config]: https://vitejs.dev/config/
+[vite-user-config]: https://github.com/vitejs/vite/blob/v5.1.6/packages/vite/src/node/config.ts#L127-L282
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/guides/component-testing.mdx b/i18n/en/docusaurus-plugin-content-docs/current/guides/component-testing.mdx
new file mode 100644
index 0000000..f2e98eb
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/guides/component-testing.mdx
@@ -0,0 +1,176 @@
+# Component Testing (experimental)
+
+## Introduction
+
+Read more about it in our blog post "[Component Testing][blog-component-testing]".
+
+## Example
+
+```(typescript)
+import { render } from '@testing-library/react';
+import Component from '../Component';
+
+it('should render react component', async ({browser}) => {
+    // Render component on isolated page
+    render(<Component />);
+
+    // Found button inside component and click on it
+    const button = await browser.$("button");
+    await button.click();
+
+    // Assert that button text has expected value
+    await expect(button).toHaveText("count is 1");
+});
+```
+
+## How to get started?
+
+Let's set up testing of react components written in Typescript.
+
+### Step 1: Install Testplane and the necessary dependencies
+
+```bash
+npm init testplane@latest
+npm i vite @vitejs/plugin-react @testing-library/react --save-dev
+npm i react --save
+```
+
+### Step 2: Create a Vite config and connect react plugin
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+    plugins: [
+        react(),
+    ]
+});
+```
+
+### Step 3: Configure tests to run in the browser (using option [testRunEnv](./config.md#testrunenv))
+
+```typescript
+// .testplane.conf.ts
+export const {
+    // ...
+    system: {
+        // ...
+        testRunEnv: ['browser', { viteConfig: './vite.config.ts' }],
+    },
+    sets: {
+        linux: {
+            files: [
+                'src/tests/**/*.testplane.tsx'
+            ],
+            browsers: [
+                'chrome'
+            ]
+        },
+    },
+}
+```
+
+### Step 4: Write a test
+
+To check the correct configuration, we can write the simplest test in which we output the `document` value to the console without using the [browser.execute][browser-execute] command:
+
+```typescript
+// src/tests/test.testplane.tsx
+it('should log document', async () => {
+    console.log(document);
+});
+```
+
+If such a test were performed in a Node.js environment, then it would have fallen with the error: `ReferenceError: document is not defined`. But in our case, it will be executed directly in the browser, where the global variable `document` is available. Therefore, in the browser and terminal log we will see the following:
+
+```
+{
+  location: {
+    ancestorOrigins: {},
+    href: 'http://localhost:56292/run-uuids/23d2af81-4259-425c-8214-c9e770d75ea4',
+    origin: 'http://localhost:56292',
+    protocol: 'http:',
+    host: 'localhost:56292',
+    hostname: 'localhost',
+    port: '56292',
+    pathname: '/run-uuids/23d2af81-4259-425c-8214-c9e770d75ea4',
+    search: '',
+    hash: ''
+  }
+}
+```
+
+Let's write a more complex test with a render of the react component:
+
+```typescript
+// src/tests/test.testplane.tsx
+import { render } from '@testing-library/react';
+import Component from '../Component';
+
+it('should render react component', async ({browser}) => {
+    // Render component on isolated page
+    render(<Component />);
+
+    // Found button inside component and click on it
+    const button = await browser.$("button");
+    await button.click();
+
+    // Assert that button text has expected value
+    await expect(button).toHaveText("count is 1");
+});
+```
+
+And the source code of the component itself:
+
+```typescript
+// src/Component.tsx
+import { useState } from 'react';
+
+// A simple component with a title and a counter button
+function Component() {
+    const [count, setCount] = useState(0);
+
+    return (
+        <div id="root">
+            <h1>Testplane Component Testing</h1>
+            <button onClick={() => setCount((count) => count + 1)}>
+                count is {count}
+            </button>
+        </div>
+    );
+}
+```
+
+A fully working examples can be found [here][testplane-examples-component-testing].
+
+## Temporary restrictions
+
+<Admonition type="warning">
+* only components written in React in files `.jsx` and `.tsx` are supported. Ability to write tests in `.js` files will be implemented soon. We will also support the Vue framework in the near future;
+* there is no access to `currentTest` from `it`, `beforeEach` and `afterEach`. It will appear in the near future;
+* the [@testplane/global-hook][testplane-global-hook] plugin is temporarily not supported.
+</Admonition>
+
+## Additional features
+
+### Hot Module Replacement (HMR)
+
+[HMR][vite-hmr] is supported in Vite. It means if you change the loaded file, either the component will be remounted, or the page will be completely preloaded. If the component is described in a separate file (i.e. not in the same file as the test), a remount will be performed, but the test will not be restarted. And if you change the test file, the page will be reloaded, which will cause Testplane to interrupt the execution of the current test and start it again. Due to this feature, you can quickly develop components in Vite and write tests for them. It is recommended to use it together with the [REPL mode][repl-mode].
+
+### Using the browser and expect instances directly in the browser DevTools
+
+Instances of the `browser` and `expect` are available inside of the browser's global scope. It is quite convenient to use it when debugging the test.
+
+### Logs from the browser console in the terminal
+
+Calling the `log`, `info`, `warn`, `error`, `debug` and `table` commands on the `console` object in the browser causes information to be displayed not only in the browser's DevTools, but also in the terminal from which Testplane was launched. I.e., you can call `console.log` in the test/component and you will be able to see the result of it execution in the terminal. This is especially handy when debugging the test.
+
+[blog-component-testing]: ../../blog/component-testing.mdx
+[test-run-env-option]: ../config/system.mdx#test_run_env
+[browser-execute]: ../commands/browser/execute.mdx
+[testplane-examples-component-testing]: https://github.com/gemini-testing/testplane/tree/master/examples/component-testing
+[testplane-global-hook]: https://github.com/gemini-testing/testplane-global-hook
+[vite-hmr]: https://vitejs.dev/guide/api-hmr.html
+[repl-mode]: ../cli.mdx#repl-mode