Skip to content

Commit

Permalink
docs: fix component testing example
Browse files Browse the repository at this point in the history
  • Loading branch information
sipayRT committed Jun 27, 2024
1 parent 8e6d3e3 commit eb5c73c
Showing 1 changed file with 16 additions and 7 deletions.
23 changes: 16 additions & 7 deletions blog/component-testing.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -108,25 +108,34 @@ 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() {
const [count, setCount] = useState(0);

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

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

Expand Down

0 comments on commit eb5c73c

Please sign in to comment.