DEV Community

Serhii Pimenov
Serhii Pimenov

Posted on

Latte: Powerful Framework for Testing JavaScript Applications

What is Latte?

Latte (an abbreviation for "laconic testing") is a modern framework for testing applications written in JavaScript and TypeScript. Designed as an alternative to popular solutions such as Jest, Mocha, and Jasmine, Latte offers a simple yet powerful approach to testing [1].

The framework provides developers with the ability to easily write and run tests for various types of applications, including web applications, React components, and other JavaScript modules.

Key Features of Latte

1. Built-in DOM Support

Unlike many other frameworks, Latte has built-in DOM support without the need for additional libraries or configurations. This significantly simplifies testing components that interact with the DOM and allows tests to be conducted in an environment that closely resembles a real browser [2].

You can use two DOM environments: happy-dom, and jsdom. The first is a lightweight implementation of the DOM API, while the second is a full-fledged DOM environment that supports all modern browser features.

2. Headless Testing Support

Latte supports headless testing mode, allowing tests to run without a visual interface. This is particularly useful for CI/CD pipelines and automated testing.

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

beforeAll(async () => {
    await B.create();
});

afterAll(async () => {
    await B.bye();
});

describe("Google", () => {
    it("Search", async () => {
        await B.visit("https://example.com");
        const title = await B.document.title();
        expect(title).toBe("Example Domain");
    });
});
Enter fullscreen mode Exit fullscreen mode

3. Simple and Intuitive Syntax

The framework offers an easy-to-understand API that makes writing tests simple even for beginners:

describe("My addition function", () => {
    it("should correctly add two numbers", () => {
        const result = add(2, 3);
        expect(result).toEqual(5);
    });

    it("should handle negative numbers", () => {
        const result = add(-1, -3);
        expect(result).toEqual(-4);
    });
});
Enter fullscreen mode Exit fullscreen mode

4. Asynchronous Testing Support

Latte has built-in support for asynchronous tests, making it easy to test functions with promises, async/await, and callbacks.

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('peanut butter');
        }, 1000);
    });
}
describe(`Async tests`, () => {
    it(`fetchData returns peanut butter`, async () => {
        const data = await fetchData();
        expect(data).toBeResolvedWith('peanut butter');
    })
})
Enter fullscreen mode Exit fullscreen mode

5. Advanced Matcher System

The framework offers a rich set of matchers for verifying various conditions, including equality, inclusion, data types, error throwing, and more.

6. Testing React Components

Latte is excellent for testing React components thanks to its built-in DOM support and the ability to mock functions.

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

afterEach(() => {
    document.body.innerHTML = '';
});

describe('React Button (JSX)', () => {
    it('should render a button with text', async () => {
        const { container } = await R.render(<Button text="Click me" />);
        const button = container.querySelector('button');
        expect(button).toBeHtmlElement().hasText('Click me');
    });
});
Enter fullscreen mode Exit fullscreen mode

Integration with the Development Ecosystem

Latte easily integrates with modern development tools:

  • NPM/Yarn: available as an npm package @olton/latte [3]
  • IDE integration: plugins available for popular IDEs, such as the Latte Test Runner plugin for JetBrains IDEs [4]
  • CI/CD support: easily integrates with popular CI/CD systems

Getting Started with Latte

To start using Latte in your project, first install it via npm:

npm install @olton/latte --save-dev
Enter fullscreen mode Exit fullscreen mode

After installation, create your first test file:

// math.test.js
import { add } from './math';

describe('Math functions', () => {
    it('add function should correctly add numbers', () => {
        expect(add(1, 2)).toEqual(3);
    });
});
Enter fullscreen mode Exit fullscreen mode

Run the tests with the command:

npx latte
Enter fullscreen mode Exit fullscreen mode

Advanced Features

Mocking

Latte provides convenient tools for mocking functions and modules:

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

global.fetch = mockFetch;

it('should call fetch', async () => {
    await getData();
    expect(mockFetch).toHaveBeenCalled();
});
Enter fullscreen mode Exit fullscreen mode

Conclusion

Latte is a modern, fast, and user-friendly framework for testing JavaScript and TypeScript applications. Its main advantages include built-in DOM support, simple syntax, and minimal configuration, making it an excellent choice for both small projects and large enterprise applications.

Thanks to active development and a growing community, Latte is becoming increasingly popular among developers looking for efficient and convenient testing tools [5].

Try Latte in your next project and experience its benefits yourself!

Useful Links

Top comments (0)