Latte: потужний фреймворк для тестування JavaScript додатків

Project Source | NPM Package | Documentation

Що таке Latte?

Latte (від “laconic testing”) — це сучасний фреймворк для тестування додатків, написаних на JavaScript та TypeScript. Розроблений як альтернатива популярним рішенням, таким як Jest, Mocha та Jasmine, Latte пропонує простий, але потужний підхід до тестування [1].

Фреймворк надає розробникам можливість легко писати та запускати тести для різних типів застосунків, включаючи веб-додатки, компоненти React та інші модулі JavaScript.

Ключові особливості Latte

1. Вбудована підтримка DOM

На відміну від багатьох інших фреймворків, Latte має вбудовану підтримку DOM без необхідності додаткових бібліотек або конфігурацій. Це значно спрощує тестування компонентів, що взаємодіють з DOM, і дозволяє проводити тести в середовищі, максимально наближеному до реального браузера [2].

Ви можете використовувати два середовища DOM: happy-dom, і jsdom. Перший-це легка реалізація API DOM, а другий-повноцінне середовище DOM, яке підтримує всі сучасні функції браузера.

2. Підтримка Headless тестування

Latte підтримує headless режим тестування, що дозволяє запускати тести без візуального інтерфейсу. Це особливо корисно для CI/CD пайплайнів та автоматизованого тестування.

1
import { B } from "@olton/latte";
2

3
beforeAll(async () => {
4
    await B.create();
5
});
6

7
afterAll(async () => {
8
    await B.bye();
9
});
10

11
describe("Google", () => {
12
    it("Search", async () => {
13
        await B.visit("https://example.com");
14
        const title = await B.document.title();
15
        expect(title).toBe("Example Domain");
16
    });
17
});

3. Простий та інтуїтивно зрозумілий синтаксис

Фреймворк пропонує зрозумілий API, що робить написання тестів простим навіть для початківців:

1
describe("Моя функція додавання", () => {
2
    it("повинна правильно додавати два числа", () => {
3
        const result = add(2, 3);
4
        expect(result).toEqual(5);
5
    });
6

7
    it("повинна обробляти від'ємні числа", () => {
8
        const result = add(-1, -3);
9
        expect(result).toEqual(-4);
10
    });
11
});

4. Підтримка асинхронних тестів

Latte має вбудовану підтримку асинхронних тестів, що дозволяє легко тестувати функції з промісами, async/await та колбеками.

1
function fetchData() {
2
    return new Promise((resolve, reject) => {
3
        setTimeout(() => {
4
            resolve('peanut butter');
5
        }, 1000);
6
    });
7
}
8
describe(`Async tests`, () => {
9
    it(`fetchData returns peanut butter`, async () => {
10
        const data = await fetchData();
11
        expect(data).toBeResolvedWith('peanut butter');
12
    })
13
})

5. Розширена система матчерів

Фреймворк пропонує багатий набір матчерів для перевірки різних умов, включаючи рівність, включення, типи даних, викидання помилок та інше.

6. Тестування React компонентів

Latte чудово підходить для тестування React компонентів завдяки вбудованій підтримці DOM та можливості мокування функцій.

1
const Button = ({ text, onClick }) => {
2
    return <button onClick={onClick}>{text}</button>;
3
};
4

5
afterEach(() => {
6
    document.body.innerHTML = '';
7
});
8

9
describe('React Button (JSX)', () => {
10
    it('should render a button with text', async () => {
11
        const { container } = await R.render(<Button text="Click me" />);
12
        const button = container.querySelector('button');
13
        expect(button).toBeHtmlElement().hasText('Click me');
14
    });
15
});

Інтеграція з екосистемою розробки

Latte легко інтегрується з сучасними інструментами розробки:

NPM/Yarn: доступний як пакет npm @olton/latte [3]
IDE інтеграція: доступні плагіни для популярних IDE, таких як плагін Latte Test Runner для JetBrains IDE [4]
CI/CD підтримка: легко інтегрується з популярними CI/CD системами

Початок роботи з Latte

Щоб почати використовувати Latte у своєму проєкті, спочатку встановіть його через npm:

1
npm install @olton/latte --save-dev

Після встановлення створіть ваш перший тестовий файл:

1
import { add } from './math';
2

3
describe('Математичні функції', () => {
4
    it('функція add повинна коректно додавати числа', () => {
5
        expect(add(1, 2)).toEqual(3);
6
    });
7
});

Запустіть тести командою:

1
npx latte

Розширені можливості

Мокування та шпигування

Latte надає зручні інструменти для мокування функцій та модулів:

1
const mockFetch = mock(() => Promise.resolve({
2
    json: () => Promise.resolve({ data: 'test' })
3
}));
4

5
global.fetch = mockFetch;
6

7
it('повинен викликати fetch', async () => {
8
    await getData();
9
    expect(mockFetch).toHaveBeenCalled();
10
});

Висновок

Latte — це сучасний, швидкий та зручний фреймворк для тестування JavaScript та TypeScript додатків. Його основні переваги включають вбудовану підтримку DOM, простий синтаксис та мінімальну конфігурацію, що робить його чудовим вибором як для невеликих проєктів, так і для великих корпоративних застосунків.

Завдяки активному розвитку та зростаючій спільноті, Latte стає все більш популярним серед розробників, які шукають ефективні та зручні інструменти для тестування [5].

Спробуйте Latte у своєму наступному проєкті та переконайтесь у його перевагах самостійно!