Utility middleware for testing web components in AVA via Puppeteer.

npm: npm install ava-webcomponents
yarn: yarn add ava-webcomponents

Create a file that renders content to the screen – such as a web component:

class Hello extends HTMLElement {
    connectedCallback() {
        this.innerHTML = 'Hello AVA!';
    }
}
customElements.define('x-ava', Hello);

Use ava-webcomponents to import the file in your AVA test, which then gives you access to the Puppeteer page variable, as well as a util function for awaiting upgrade of a defined web component.

All imports in your web component file will be resolved relative to the nearest package.json file, which uses a simple Express server instance to import your files.

import test from 'ava';
import withComponent from 'ava-webcomponents';
test(
    'It should render "Hello AVA!";',
    withComponent(`${__dirname}/helpers/example.js`),
    async (t, { page, utils }) => {
        await utils.waitForUpgrade('x-ava');
        const content = await page.evaluate(() => {
            const node = document.createElement('x-ava');
            document.body.append(node);
            return node.innerHTML;
        });
        t.is(content, 'Hello AVA!');
    }
);

With the second argument of the withComponent function you can pass options for puppeteer.launch. However there's also a shortcut for debugging Puppeteer by using withComponent.debug which slows down the tests, opens the devtools, and prevents Chromium from being headless.