У кого-нибудь есть хорошая настройка для тестирования пользовательских элементов с помощью 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');
});
});
И, наконец, это текущая настройка среды шутки:
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;
