如何用玩笑来测试Web组件(照明元件) [英] How to test Web Component (lit-element) with jest
问题描述
任何人都可以使用jest，jsdom或类似工具测试自定义元素的良好设置吗?我一直在使用Puppeteer和Selenium，但是它们减慢了测试速度. jsdom的其他替代方法或修复程序可以使以下测试运行吗?
Anyone has a good setup for testing custom elements with jest, jsdom or similar? I have been using Puppeteer and Selenium, but they slow down the test runs too much. Any other alternatives or fixes for jsdom that makes the below test runnable?
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');
});
});
最后这是当前的笑话环境设置:
And finally this is the current jest environment setup:
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;
推荐答案
可以通过一些其他设置来实现.
It is possible with a bit of additional setup.
如果您查看开放的wc文档，他们建议您在已经使用Karma和Headless Chrome浏览器的浏览器中测试您的Web组件.正如您已经指出的，Puppeteer和Selenium对此太慢了，唯一可行的浏览器替代品是ElectronJS.有一个供Jest使用的跑步者.
If you look at open wc docs, they recommend testing your web components in the browser which they already do with Karma and Headless Chrome. As you already pointed out Puppeteer and Selenium are too slow for this and the only viable browser alternative is ElectronJS. There is a runner available for Jest.
https://github.com/hustcc/jest-electron
这将使您可以在具有Shadow DOM访问权限的真实浏览器中呈现Web组件，并且测试仍将很快.像这样，我使用Webpack来处理我的代码.
This will allow you to render your web components in a real browser with access to Shadow DOM and your tests will still be fast. Something like this, I use Webpack for processing my code.
// 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>`;
}
}
Webpack配置
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);
});
});
我什至写了一篇关于此的博客文章，在那里您可以找到具有完整设置等的存储库.
I even wrote a blog post about this and there you can find repos with the full setup etc.
https://www .ninkovic.dev/blog/2020/testing-web-components-with jest-and-lit-element
这篇关于如何用玩笑来测试Web组件(照明元件)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
