Use Mocks to Improve Tests Performance

I don’t want to explain how mocks works and what they are, because you can find better sources on this topic like this one. I’d like only to point out that using mocks wisely can sometimes significantly improve the performance of your tests.

Let’s dive into an example (a real example but repo still in progress). I use React and vitest.

// component.tsx
function componentTemplate(props) {
    return `<div class="root">${ReactDOM.renderToString(
        <App />,
    )}</div>`;
}

// component.spec.tsx
it('should render root element', () => {
    // Arrange
    const container = document.createElement('div');

    // Act
    container.innerHTML = componentTemplate();

    // Assert
    expect(container.querySelector('.root')).not.toBeNull();
});

Duration: ~309ms

If you’re sure you don’t need specific modules in your test case, you can freely mock them.

// component.spec.tsx
vi.mock('ui/App', () => ({
    App: vi.fn(() => <div>Mocked App</div>),
}));

// test implementation

Tests duration: ~86ms

Of course, you won’t always be able to use mocks, but you should be aware that mocking is not only about replacing implementation details but also a way to improve performance, which is crucial in large projects when you have hundreds of tests.