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

原文 标签 unit-testing jestjs puppeteer web-component

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

Chromium 支持类似的命令

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

注册自定义 Web 组件。

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

作为一种解决方法,我尝试使用 玩偶结合 puppeteer 和 express 运行 customElements部分 Chrome 。

但是,我很难注入(inject)自定义元素类 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' and 'export' may only appear at the top level



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

一些相关的东西:
  • Web Component / HtmlElement : unit testing
  • https://itnext.io/testing-your-javascript-in-a-browser-with-jest-puppeteer-express-and-webpack-c998a37ef887
  • How to mock dependencies for ES6 unit tests?
  • Can't get test coverage with jest + puppeteer
  • https://jestjs.io/docs/en/puppeteer
  • 最佳答案

    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.
    
    请注意,并非所有功能都受支持,尤其是 影子 DOM 不工作 .

    关于unit-testing - 如何用 jest 测试自定义 Web 组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57478484/

    相关文章:

    javascript - 变量未在 promise 内分配

    unit-testing - Pycharm 不允许运行文件。仅显示运行单元测试选项。

    android - @Smoke 在 Robotium 中的意义是什么?什么时候应该使用它?

    unit-testing - TypeError:无法读取未定义的属性 'contextTypes'

    puppeteer - 如何修复网络爬虫中的 'page.goto is not a function' 错误

    javascript - 为什么 Puppeteer 点击功能在本网站不起作用?

    c# - 如何测试一个充满常量的类

    java - 测试 JAX-RS Web 服务?

    ios - 如何使用 Jest 测试导入自定义 native 模块的 React Native 组件?

    node.js - 如何在使用 jest 模拟 axios.get 时传递 AxiosPrmoise 类型值?