unit-testing - 如何用 jest 测试自定义 Web 组件？

问题描述

我想测试一些自定义 Web 组件并使用 jest.js 作为测试运行器（因为它支持 ES6）。

Chromium 支持类似的命令

window.customElements.define('my-custom-element', MyCustomElementClass);

注册自定义 Web 组件。

但是，window.customElements在开玩笑测试的背景下似乎并不为人所知。

作为一种解决方法，我尝试将jest 与 puppeteer 和 express 结合使用customElements以在 Chromium中运行该部分。

但是，我很难TreezElement在评估的代码中注入自定义元素类：

treezElement.js：

class TreezElement extends HTMLElement {
    connectedCallback () {
      this.innerHTML = 'Hello, World!';
    }
}

treezElement.test.js：

import TreezElement from '../../src/components/treezElement.js';
import puppeteer from 'puppeteer';
import express from 'express';

describe('Construction', ()=>{

    let port = 3000;

    let browser;
    let page;
    let element;
    const width = 800;
    const height = 800;

    beforeAll(async () => {

        const app = await express()                   
                    .use((req, res) => {                       
                        res.send(
                        `<!DOCTYPE html>
                        <html>            
                            <body>
                            <div id="root"></div>                           
                            </body>
                        </html>`
                        )
                    })
                    .listen(port);

        browser = await puppeteer.launch({
          headless: false,
          slowMo: 80,
          args: [`--window-size=${width},${height}`]
        });

        var pages = await browser.pages();
        page = pages[0]; 

        await page.setViewport({ width, height });        

        await page.goto('http://localhost:3000'); 

        element = await page.evaluate(({TreezElement}) => {
            console.log('TreezElement:')
            console.log(TreezElement);
            window.customElements.define('treez-element', TreezElement);
            var element = document.create('treez-element');
            document.body.appendChild(element);
            return element;           
         }, {TreezElement}); 

    });


    it('TreezElement', ()=>{   

    });    

    afterAll(() => {
        browser.close();
    });        

});

也许TreezElement是不可序列化的，因此undefined被传递给函数。

如果我尝试TreezElement直接从评估代码中导入自定义元素类...

element = await page.evaluate(() => {
            import TreezElement from '../../src/components/treezElement.js';
            console.log('TreezElement:')
            console.log(TreezElement);
            window.customElements.define('treez-element', TreezElement);
            var element = document.create('treez-element');
            document.body.appendChild(element);
            return element;           
         });

...我得到了错误

'import' 和 'export' 只能出现在顶层

=> 用 jest 测试自定义 Web 组件的推荐方法是什么？

一些相关的东西：

标签： unit-testingjestjspuppeteerweb-component

我创建了一个支持 Web 组件的服务器端渲染的 DOM。它还支持使用 Jest 测试 Web 组件。

DOM：

https://www.npmjs.com/package/happy-dom

开玩笑环境：

https://www.npmjs.com/package/jest-environment-happy-dom

安装它

npm install jest-environment-happy-dom --save-dev

要使用它：

编辑您的 package.json 以包含 Jest 环境：

{
    "scripts": {
        "test": "jest --env=jest-environment-happy-dom"
    }
}

unit-testing - 如何用 jest 测试自定义 Web 组件？

问题描述

解决方案

推荐阅读