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

Question

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

Chromium 支持像

这样的命令

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

注册自定义 Web 组件。

然而，window.customElements在笑话测试的上下文中似乎并不为人所知。

作为解决方法，我尝试将 jest 与 puppeteer 结合使用，并将 表达为运行 Chromium 中的 customElements 部分。

但是，我很难在评估代码中注入自定义元素 class 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 被传递给函数。

如果我尝试直接从评估代码中导入自定义元素 class 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' and 'export' may only appear at the top level

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

一些相关的东西：

Answer 1

这是一个丑陋的版本。关于此的一些进一步说明：

express.js 配置为 文件服务器 。否则，导入的 ES6 模块的 MIME 类型或跨源检查会出现问题。
classTreezElement不是直接导入的，而是使用创建额外脚本标签[=21=的变通方法]
实例方法在代码覆盖率方面存在问题。好像不能直接调用TreezElement的构造函数（继承自HTMLElement，=>illegal constructor）。元素 class 的实例只能在 puppeteer 中使用 document.createElement(...) 创建。因此，在 Jest 中不能测试所有实例方法，只能测试静态方法。可以在 puppeteer 中测试实例方法和属性。然而，。

创建的 TreezElement 类型的元素可以 ElementHandle 的形式返回。 访问元素 实例的属性和方法非常麻烦（请参见下面的示例）。作为句柄方法的替代方法，可以应用 page.$eval 方法：

var id = await page.$eval('#custom-element', element=> element.id);

index.html

<!doctype html> <html> <head> <meta charset="UTF-8"> </head> <body> <div id="root"></div> </body> </html>

treezElement.test.js

import TreezElement from '../../src/components/treezElement.js'; import puppeteer from 'puppeteer'; import express from 'express'; describe('Construction', ()=>{ let port = 4444; const index = Math.max(process.argv.indexOf('--port'), process.argv.indexOf('-p')) if (index !== -1) { port = +process.argv[index + 1] || port; } var elementHandle; beforeAll(async () => { const fileServer = await express() .use(express.static('.')) .listen(port); var browser = await puppeteer.launch({ headless: false, slowMo: 80, userDataDir: '.chrome', args: ['--auto-open-devtools-for-tabs'] }); var pages = await browser.pages(); var page = pages[0]; await page.goto('http://localhost:'+port + '/test/index.html'); await page.evaluate(() => { var script = document.createElement('script'); script.type='module'; script.innerHTML="import TreezElement from '../src/components/treezElement.js';\n" + "window.customElements.define('treez-element', TreezElement);\n" + "var element = document.createElement('treez-element');\n" + "element.id='custom-element';\n" + "document.body.appendChild(element);"; document.head.appendChild(script); }); elementHandle = await page.evaluateHandle(() => { return document.getElementById('custom-element'); }); }); it('id', async ()=>{ var idHandle = await elementHandle.getProperty('id'); var id = await idHandle.jsonValue(); expect(id).toBe('custom-element'); }); afterAll(() => { browser.close(); }); });

Answer 2

另一种（有限的）方法是使用 Object.create 作为变通方法来创建自定义 Web 组件的实例，而不使用 window.customElements.define 和 document.createElement(..) :

import TreezElement from '../../src/components/treezElement.js';
var customElement = Object.create(TreezElement.prototype);

这样 实例方法可以直接测试 开玩笑，测试也包含在代码覆盖率中。（还有我关于人偶操纵者的其他回答的报道问题。）

一个主要缺点是只能访问方法，不能访问属性。如果我尝试使用 customElement.customProperty 我得到：TypeError: Illegal invocation.

这是Element.js中检查!module.exports.is(this)造成的：

Element.prototype.getAttribute = function getAttribute(qualifiedName) {
  if (!this || !module.exports.is(this)) {
    throw new TypeError("Illegal invocation");
  }
...
Element.prototype.setAttribute = function setAttribute(qualifiedName,value){
if (!this || !module.exports.is(this)) {
   throw new TypeError("Illegal invocation");
}

Object.create的另一个缺点是构造函数代码没有被调用，也没有包含在测试覆盖率中。

如果命令 window.customElements.define(..) 直接包含在我们要导入的 class 文件中（例如 treezElement.js）... customElements 属性需要在包含导入之前被模拟：

customElementsMock.js:

export default class CustomElementsMock{} //dummy export

//following command mocks the customElements feature to be able
//to import custom elements in jest tests
window.customElements = {
    define: (elementName, elementClass)=>{
        console.log('Mocked customElements.define(..) for custom element "' + elementName + '"');
    }
};

在treezElement.test.js中的使用：

import CustomElementsMock from '../customElementsMock.js';
import TreezElement from '../../src/components/treezElement.js';
var customElement = Object.create(TreezElement.prototype);
//...

（我也尝试将模拟代码直接放在 treezElement.test.js 的开头，但是。这就是为什么我不得不将模拟代码放在一个额外的文件中。）

Answer 3

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

DOM:

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

Jest环境：

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"
    }
}

Answer 4

使用electron runner可以包含所有节点和chrome env，用它来代替 jsdom

https://github.com/facebook-atom/jest-electron-runner

Answer 5

JSDOM 16.2 includes basic support for custom elements and is available in Jest 26.5 及以上。这是一个简单的 Jest 测试，显示它有效：

customElements.define('test-component', class extends HTMLElement {
    constructor() {
        super();
        const p = document.createElement('p')
        p.textContent = 'It works!'
        this.appendChild(p)
    }
})

test('custom elements in JSDOM', () => {
    document.body.innerHTML = `<h1>Custom element test</h1> <test-component></test-component>`
    expect(document.body.innerHTML).toContain('It works!')
})

输出：

$ jest

PASS  ./test.js
✓ custom elements in JSDOM (11 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.409 s
Ran all test suites.

请注意，并非所有功能都受支持，特别是 shadow DOM 不工作。

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

How to test custom web component with jest?

unit-testing

web-component

jestjs

puppeteer