Как протестировать веб-компонент (lit-элемент) с помощью шутки

Это возможно с небольшой дополнительной настройкой.

Если вы посмотрите на документы open wc, они рекомендуют тестировать ваши веб-компоненты в браузере, что они уже делают с Karma и Headless Chrome. Как вы уже заметили, Puppeteer и Selenium слишком медленны для этого, и единственная жизнеспособная альтернатива браузеру — это ElectronJS. Для Jest доступен бегун.

https://github.com/hustcc/jest-электрон

Это позволит вам отображать ваши веб-компоненты в реальном браузере с доступом к Shadow DOM, и ваши тесты по-прежнему будут быстрыми. Примерно так я использую Webpack для обработки своего кода.

// button.ts
import {html, customElement, LitElement, property} from "lit-element";

@customElement('awesome-button')
export class Button extends LitElement {

    @property()
    buttonText = '';

    render() {
        return html`<button id = "custom-button"
            @click = "${() => {}}">${this.buttonText}</button>`;
    }
}

Конфигурация веб-пакета

const path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: './index.ts',
    module: {
        rules: [
            {
                test: /\.ts?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    plugins: [
        new CleanWebpackPlugin()
    ],
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
};

Конфигурация шутки

module.exports = {
    preset: 'ts-jest',
    runner: 'jest-electron/runner',
    testEnvironment: 'jest-electron/environment',
    setupFiles: ['./dist/main.js'],
};

И, наконец, наш тест.

import {LitElement} from 'lit-element';

describe('awesome-button', () => {

    const AWESOME_BUTTON_TAG = 'awesome-button';
    const ELEMENT_ID = 'custom-button';
    let buttonElement: LitElement;

    const getShadowRoot = (tagName: string): ShadowRoot => {
        return document.body.getElementsByTagName(tagName)[0].shadowRoot;
    }

    beforeEach(() => {
        buttonElement = window.document.createElement(AWESOME_BUTTON_TAG) as LitElement;
        document.body.appendChild(buttonElement);
    });

    afterEach(() => {
       document.body.getElementsByTagName(AWESOME_BUTTON_TAG)[0].remove();
    });

    it('displays button text', async () => {
        const dummyText = 'Web components & Jest with Electron';
        buttonElement.setAttribute('buttonText', dummyText);
        await buttonElement.updateComplete;

        const renderedText = getShadowRoot(AWESOME_BUTTON_TAG).getElementById(ELEMENT_ID).innerText;

        expect(renderedText).toEqual(dummyText);
    });
    it('handles clicks', async () => {
        const mockClickFunction = jest.fn();
        buttonElement.addEventListener('click', () => {mockClickFunction()});

        getShadowRoot(AWESOME_BUTTON_TAG).getElementById(ELEMENT_ID).click();
        getShadowRoot(AWESOME_BUTTON_TAG).getElementById(ELEMENT_ID).click();

        expect(mockClickFunction).toHaveBeenCalledTimes(2);
    });
});

Я даже написал об этом в блоге, и там вы можете найти репозитории с полной настройкой и т. д.

https://www.ninkovic.dev/blog/2020/testing-web-components-with-jest-and-lit-element