gpt4 book ai didi

polymer - 如何用 Jest 测试 Web 组件(lit-element)

转载 作者:行者123 更新时间:2023-12-03 15:13:55 25 4
gpt4 key购买 nike

任何人都有一个很好的设置来使用 jest、jsdom 或类似的东西来测试自定义元素?我一直在使用 Puppeteer 和 Selenium,但它们使测试运行速度减慢太多。 jsdom 的任何其他替代方案或修复程序可以使以下测试运行吗?

import {LitElement} from 'lit-element';
import {html} from 'lit-html';

export class Counter extends LitElement {
static get properties() {
return Object.assign({}, super.properties, {
count: {type: Number}
});
}

render() {
return html`Count is ${this.count}`;
}
}

customElements.define('c-counter', Counter);
使用测试文件:
import './counter';

describe('c-counter', () => {
it('should be registered', () => {
expect(customElements.get('c-counter')).toBeDefined();
});

it('render', async () => {
const element = window.document.createElement('c-counter');
window.document.body.appendChild(element);

await element.updateComplete;
expect(element.innerHTML).toContain('Count is undefined');

element.count = 3;
await element.updateComplete;

expect(element.innerHTML).toContain('Count is 3');
});
});
最后这是当前的 jest 环境设置:
const {installCommonGlobals} = require('jest-util');
const {JSDOM, VirtualConsole} = require('jsdom');
const JSDOMEnvironment = require('jest-environment-jsdom');
const installCE = require('document-register-element/pony');

class JSDOMCustomElementsEnvironment extends JSDOMEnvironment {
constructor(config, context) {
super(config, context);

this.dom = new JSDOM('<!DOCTYPE html>', {
runScripts: 'dangerously',
pretendToBeVisual: true,
VirtualConsole: new VirtualConsole().sendTo(context.console || console),
url: 'http://jsdom'
});

/* eslint-disable no-multi-assign */
const global = (this.global = this.dom.window.document.defaultView);

installCommonGlobals(global, config.globals);

installCE(global.window, {
type: 'force',
noBuiltIn: false
});
}

teardown() {
this.global = null;
this.dom = null;

return Promise.resolve();
}
}

module.exports = JSDOMCustomElementsEnvironment;

最佳答案

可以通过一些额外的设置。

如果您查看 open wc 文档,他们建议在浏览器中测试您的 Web 组件,他们已经使用 Karma 和 Headless Chrome 进行了测试。正如您已经指出的,Puppeteer 和 Selenium 对此来说太慢了,唯一可行的浏览器替代方案是 ElectronJS。有一个可用于 Jest 的运行者。

https://github.com/hustcc/jest-electron

这将允许您在能够访问 Shadow DOM 的真实浏览器中呈现您的 Web 组件,并且您的测试仍然会很快。像这样,我使用 Webpack 来处理我的代码。

// button.ts
import {html, customElement, LitElement, property} from "lit-element";

@customElement('awesome-button')
export class Button extends LitElement {

@property()
buttonText = '';

render() {
return html`<button id="custom-button"
@click="${() => {}}">${this.buttonText}</button>`;
}
}


网络包配置

const path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = {
mode: 'development',
entry: './index.ts',
module: {
rules: [
{
test: /\.ts?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
plugins: [
new CleanWebpackPlugin()
],
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
};


玩笑配置

module.exports = {
preset: 'ts-jest',
runner: 'jest-electron/runner',
testEnvironment: 'jest-electron/environment',
setupFiles: ['./dist/main.js'],
};


最后是我们的测试。

import {LitElement} from 'lit-element';

describe('awesome-button', () => {

const AWESOME_BUTTON_TAG = 'awesome-button';
const ELEMENT_ID = 'custom-button';
let buttonElement: LitElement;

const getShadowRoot = (tagName: string): ShadowRoot => {
return document.body.getElementsByTagName(tagName)[0].shadowRoot;
}

beforeEach(() => {
buttonElement = window.document.createElement(AWESOME_BUTTON_TAG) as LitElement;
document.body.appendChild(buttonElement);
});

afterEach(() => {
document.body.getElementsByTagName(AWESOME_BUTTON_TAG)[0].remove();
});

it('displays button text', async () => {
const dummyText = 'Web components & Jest with Electron';
buttonElement.setAttribute('buttonText', dummyText);
await buttonElement.updateComplete;

const renderedText = getShadowRoot(AWESOME_BUTTON_TAG).getElementById(ELEMENT_ID).innerText;

expect(renderedText).toEqual(dummyText);
});
it('handles clicks', async () => {
const mockClickFunction = jest.fn();
buttonElement.addEventListener('click', () => {mockClickFunction()});

getShadowRoot(AWESOME_BUTTON_TAG).getElementById(ELEMENT_ID).click();
getShadowRoot(AWESOME_BUTTON_TAG).getElementById(ELEMENT_ID).click();

expect(mockClickFunction).toHaveBeenCalledTimes(2);
});
});


我什至写了一篇关于这个的博客文章,在那里你可以找到带有完整设置等的存储库。

https://www.ninkovic.dev/blog/2020/testing-web-components-with-jest-and-lit-element

关于polymer - 如何用 Jest 测试 Web 组件(lit-element),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55166509/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com