通过一些额外的设置是可能的。
如果您查看 open wc 文档，他们建议在浏览器中测试您的 Web 组件，他们已经使用 Karma 和 Headless Chrome 进行了测试。正如您已经指出的那样，Puppeteer 和 Selenium 对此来说太慢了，唯一可行的浏览器替代方案是 ElectronJS。有一个跑步者可供 Jest 使用。
https://github.com/hustcc/jest-electron 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>`;
}
}
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);
});
});
我什至写了一篇关于此的博客文章，您可以在那里找到具有完整设置等的存储库。
https://www.ninkovic.dev/blog/2020/testing-web-components-with-jest-and-lit-element https://www.ninkovic.dev/blog/2020/testing-web-components-with-jest-and-lit-element
