Latte: Powerful Framework for Testing JavaScript Applications

Project Source | NPM Package | Documentation

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.

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. Simple and Intuitive Syntax

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

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

7
    it("should handle negative numbers", () => {
8
        const result = add(-1, -3);
9
        expect(result).toEqual(-4);
10
    });
11
});

4. Asynchronous Testing Support

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

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. 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.

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

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:

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

After installation, create your first test file:

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

3
describe('Math functions', () => {
4
    it('add function should correctly add numbers', () => {
5
        expect(add(1, 2)).toEqual(3);
6
    });
7
});

Run the tests with the command:

1
npx latte

Advanced Features

Mocking

Latte provides convenient tools for mocking functions and modules:

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

5
global.fetch = mockFetch;
6

7
it('should call fetch', async () => {
8
    await getData();
9
    expect(mockFetch).toHaveBeenCalled();
10
});

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!