Перейти к основному содержимому

Компонентное тестирование

Введение​

Узнайте больше об этом в посте про Компонентное тестирование в нашем блоге.

Пример​

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 и необходимых зависимостей​

npm init testplane@latest
npm i vite @vitejs/plugin-react @testing-library/react --save-dev
npm i react --save

Шаг 2: Создание конфигурации Vite и подключение плагина react​

vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
    plugins: [react()],
});

Шаг 3: Настройка запуска тестов в браузере (используя опцию testRunEnv)​

.testplane.conf.ts
export default {
    // ...
    system: {
        // ...
        testRunEnv: ["browser", { viteConfig: "./vite.config.ts" }],
    },
    sets: {
        linux: {
            files: ["src/tests/**/*.testplane.tsx"],
            browsers: ["chrome"],
        },
    },
};

Шаг 4: Написание теста​

Чтобы проверить правильную конфигурацию, мы можем написать самый простой тест, в котором выводим значение document в консоль без использования команды browser.execute:

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: ''
  }
}

Давайте напишем более сложный тест с рендером компонента:

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");
});

И исходный код самого компонента:

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>
    );
}

Полностью работающие примеры можно найти здесь.

Временные ограничения​

warning

  • поддерживаются только компоненты, написанные на React в файлах .jsx и .tsx. Возможность написания тестов в файлах .js будет реализована в ближайшем будущем. Мы также планируем поддержку фреймворка Vue;

  • нет доступа к currentTest из it, beforeEach и afterEach. Это будет добавлено в ближайшем будущем;

  • плагин @testplane/global-hook в настоящее время временно не поддерживается.

Дополнительные возможности​

Горячая замена модулей (HMR)​

HMR поддерживается в Vite. Это означает, что если вы измените загруженный файл, либо компонент будет повторно монтироваться, либо страница будет полностью предварительно загружена. Если компонент описан в отдельном файле (т.е. не в том же файле, что и тест), произойдет повторная установка, но тест не будет перезапущен. А если вы измените файл теста, страница будет перезагружена, что заставит Testplane прервать выполнение текущего теста и запустить его заново. Благодаря этой функции вы можете быстро разрабатывать компоненты в Vite и писать для них тесты. Рекомендуется использовать ее вместе с REPL режимом.

Использование экземпляров browser и expect напрямую в средствах разработчика браузера​

Инстансы browser и expect доступны в глобальной области видимости браузера. Это довольно удобно использовать при отладке теста.

Логи из консоли браузера в терминале​

Вызов команд log, info, warn, error, debug и table на объекте console в браузере приводит к отображению информации не только в средствах разработчика браузера, но также в терминале, из которого был запущен Testplane. То есть, вы можете вызывать console.log в тесте/компоненте и увидеть результат его выполнения в терминале. Это особенно удобно при отладке тестов.