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

lc8prwob 于 2023-04-10 发布在 Jest

关注(0)|答案(5)|浏览(217)

我想测试一些自定义的Web组件，并使用jest.js作为测试运行器（由于它支持ES6）。
Chromium支持以下命令

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

注册自定义Web组件。
然而，window.customElements在jest测试的上下文中似乎是未知的。
作为一个变通方案，我尝试使用jest结合puppeteer和express来运行Chromium中的customElements部分。
然而，我很难在评估的代码中注入自定义元素类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组件的推荐方法是什么？

一些相关的东西：

jestjs

来源：https://stackoverflow.com/questions/57478484/how-to-test-custom-web-component-with-jest

5条答案

按热度按时间

s4chpxco1#

JSDOM 16.2包括对自定义元素的基本支持，并且在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不工作。

赞(0）回复(0）举报 2023-04-10

8zzbczxx2#

我已经创建了一个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"
    }
}

编辑：

包的名称已更改为“@happy-dom/jest-environent”

赞(0）回复(0）举报 2023-04-10

uoifb46i3#

使用electron runner可以包含所有的node和chrome env，用这个来代替jsdom
https://github.com/facebook-atom/jest-electron-runner

赞(0）回复(0）举报 2023-04-10

6ioyuze24#

这里有一个丑陋的版本，有点工作。一些进一步的说明：

express.js配置为文件服务器，否则导入的ES6模块会出现mime类型或跨域检查问题。
类TreezElement不是直接导入的，而是通过创建一个额外的脚本标记来实现的。
示例方法存在代码覆盖率问题，似乎无法直接调用TreezElement的构造函数（继承自HTMLElement，=〉illegal constructor），在puppeteer中只有document.createElement(...)才能创建元素类的示例，因此，所有的示例方法都不能在Jest中测试，只能测试静态方法。示例方法和属性可以在puppeteer中测试。但是，the code coverage of jest does not consider the code coverage of 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();
    });    

});

赞(0）回复(0）举报 2023-04-10

uxhixvfz5#

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

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

这样，示例方法可以直接在jest中测试，并且测试也包含在代码覆盖率中。（也是我关于puppeteer的另一个答案的覆盖率问题。）
一个主要的缺点是只能访问方法，不能访问属性。如果我尝试使用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(..)直接包含在我们想要导入的类文件中（例如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);
//...

（我也尝试将mock代码直接放在treezElement.test.js的开头，但是all the imports are executed prior to the script doing the import。这就是为什么我必须将mock代码放在一个额外的文件中。）

赞(0）回复(0）举报 2023-04-10

我来回答

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

5条答案

相关问题

热门标签

最新问答