@tobejacob/myextension/src/browser/myextension-widget.test.ts

The example extension demonstrates how to contribute a custom widget (i.e. a view or editor) to Eclipse Theia. Furthermore, the template contains an example unit test.

import 'reflect-metadata';
import { MessageService } from '@theia/core';
import { ContainerModule, Container } from '@theia/core/shared/inversify';
import { MyextensionWidget } from './myextension-widget';
import { render } from '@testing-library/react'

describe('MyextensionWidget', () => {

    let widget: MyextensionWidget;

    beforeEach(async () => {
        const module = new ContainerModule( bind => {
            bind(MessageService).toConstantValue({
                info(message: string): void {
                    console.log(message);
                }
            } as MessageService);
            bind(MyextensionWidget).toSelf();
        });
        const container = new Container();
        container.load(module);
        widget = container.resolve<MyextensionWidget>(MyextensionWidget);
    });

    it('should render react node correctly', async () => {
        const element = render(widget.render());
        expect(element.queryByText('Display Message')).toBeTruthy();
    });

    it('should inject \'MessageService\'', () => {
        const spy = jest.spyOn(widget as any, 'displayMessage')
        widget['displayMessage']();
        expect(spy).toBeCalled();
    });

});