使用 jsdom 测试 Web 组件答案

【问题标题】：Testing web components with jsdom使用 jsdom 测试 Web 组件
【发布时间】：2021-06-07 20:49:23
【问题描述】：

我有一个已构建的 Web 组件（使用 Rollup）捆绑到 UMD 和 ESM 包中。 src/index.js 基本上是这个样子的。

import html from 'template.html';
import css from 'styles.css';

export class MyComponent extends window.HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
}

export default (function() {
  window.customElements.define('my-component', MyComponent);
})()

我很清楚这看起来有多么奇怪，并且我愿意接受有关清理它以便测试真正起作用的建议。

我正在尝试使用mocha 和jsdom-global 测试我的Web 组件。问题是我无法安装组件。换句话说，这失败了：

import jsdomGlobal from 'jsdom-global';
import { expect } from 'chai';

import { MyComponent } from '../dist/my-component.esm';

describe('test', function() {
  let jsdom;

  before(function(){
    jsdom = jsdomGlobal('', { runScripts: 'dangerously' });
    const script = document.createElement('script');
    script.textContent = `window.customElements.define('my-component', (${MyComponent}))`;
    document.head.appendChild(script);
  })

  after(function() {
    jsdom();
  });

  it('mounts', async function() {
    await window.customElements.whenDefined('my-component');
    expect(window.customElements.get('my-component')).to.exist;
  })
})

我也尝试过不在一个新的window.customElements.define 调用中进行包装，因为我认为 IIFE 会在文件被引用后才执行，但情况似乎并非如此？ p>

顺便说一句，如果有人知道如何直接测试/src 文件而不是/dist，那就太棒了。我认为mocha 和rollup 可以通过某种方式一起工作以更好地识别覆盖范围。就目前而言，覆盖范围仅显示单行故障，而不是源代码中的任何故障。

【问题讨论】：

在 JSDOM 中测试 WebComponents 是一个糟糕的选择，因为通常您会想要使用 JSDOM 不支持或仅部分支持的各种 WebAPI。 JSDOM 不是真正的浏览器，它旨在运行单元测试，但对于其他任何事情，我真的建议您使用适当的、真正的测试环境。 Playwright 和 Web Test Runner 是不错的选择，它们在现代硬件上也相当快。

标签： javascript mocha.js web-component rollup native-web-component

【解决方案1】：

好的，在尝试了各种事情之后，我取得了一些的成功。

import { JSDOM } from 'jsdom';
import { expect } from 'chai';
import fs from 'fs';
import { resolve } from 'path';
import { promisify } from 'util';

const readFile = promisify(fs.readFile);

async function getHTML() {
  const script = await readFile(resolve(__dirname, '..', 'dist', 'my-component.umd.js'));
  return `<html><head><script>${script}</script></head><body></body></html>`;
}

describe('my-component', function () {
  describe('browser context', function() {
    let window, document;

    before(async function() {
      const html = await getHTML();
      const dom = new JSDOM(html, { runScripts: 'dangerously', resources: 'usable' });
      window = dom.window;
      document = window.document;
    });

    it('defines a custom element', async function() {
      await window.customElements.whenDefined('my-component');
      expect(window.customElements.get('my-component')).to.exist;
    })
  })
})

所以这通过了断言，但是因为测试不知道脚本，所以没有覆盖率指标。

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |       0 |        0 |       0 |       0 |                   
----------|---------|----------|---------|---------|-------------------

能够测试和报告覆盖率会很好，但现在必须这样做。

【讨论】：